@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800;900&display=swap";.universal-search-shell{position:relative;z-index:30;flex:1;max-width:620px}.universal-search-shell .market-search{width:100%}.universal-search-results{position:absolute;top:calc(100% + 9px);left:0;right:0;max-height:min(70vh,560px);overflow:auto;border:1px solid rgba(40,109,255,.28);border-radius:14px;background:rgba(255,255,255,.98);box-shadow:0 18px 46px rgba(18,31,52,.2);padding:8px;backdrop-filter:blur(14px)}.universal-search-results section{padding:7px 0;border-bottom:1px solid #e7edf5}.universal-search-results section:last-child{border-bottom:0}.universal-search-results h2{display:flex;align-items:center;gap:7px;margin:0;padding:4px 9px 7px;color:#58708e;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.universal-search-results section>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;border-radius:9px;background:transparent;color:#142035;padding:9px;text-align:left;transition:background .16s var(--ease-out),transform .16s var(--ease-out)}.universal-search-results section>button:hover,.universal-search-results section>button:focus-visible{background:#eef4ff;transform:translateX(2px);outline:none}.universal-search-results section>button span{display:grid;gap:2px;min-width:0}.universal-search-results section>button strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}.universal-search-results section>button small{overflow:hidden;color:#6c7a90;font-size:.66rem;text-overflow:ellipsis;white-space:nowrap}.universal-search-results section>button>svg{flex:none;color:#286dff}.universal-search-empty{display:grid;justify-items:start;gap:6px;padding:20px 12px;color:#62738a}.universal-search-empty strong{color:#1c2a3d;font-size:.82rem}.universal-search-empty span{font-size:.7rem;line-height:1.5}@media(max-width:860px){.universal-search-shell{order:3;max-width:none;width:100%}.universal-search-results{max-height:55vh}.universal-search-shell .search-category{display:none}} .process-section-refined{background:linear-gradient(130deg,#101725 0%,#172a48 52%,#25355f 100%);padding:clamp(64px,7vw,104px) max(24px,calc((100vw - 1240px)/2));gap:clamp(36px,6vw,90px);position:relative;overflow:hidden}.process-section-refined:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,rgba(122,163,214,.2),transparent 28%),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,38px 38px,38px 38px;pointer-events:none}.process-section-refined>*{position:relative}.process-section-refined .section-marker{color:#a9d4ff}.process-section-refined .process-intro h2{max-width:8ch;font-size:clamp(2.6rem,5vw,4.85rem);line-height:.9;letter-spacing:-.075em;color:#f5f8fc}.process-section-refined .process-intro h2 em{color:#a3d8bd}.process-section-refined .process-intro p{max-width:430px;color:#b9c6d8;font-size:clamp(.85rem,1.3vw,1rem);line-height:1.65}.process-section-refined .process-intro a{background:#a3d8bd;color:#102135;border:0;border-radius:8px;padding:13px 16px;font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.process-section-refined .steps-list{border-top:1px solid rgba(212,226,242,.22)}.process-section-refined .step-item{border-color:rgba(212,226,242,.2);padding:20px 0;transition:background .18s var(--ease-out),transform .18s var(--ease-out)}.process-section-refined .step-item:nth-child(1){box-shadow:inset 3px 0 #78b8ff}.process-section-refined .step-item:nth-child(2){box-shadow:inset 3px 0 #b9a7ff}.process-section-refined .step-item:nth-child(3){box-shadow:inset 3px 0 #eaa49a}.process-section-refined .step-item:hover{background:rgba(255,255,255,.035);transform:translateX(4px)}.process-section-refined .step-item>span{color:#a3d8bd}.process-section-refined .step-item h3{font-size:clamp(1rem,1.6vw,1.35rem);letter-spacing:-.02em;color:#f5f8fc}.process-section-refined .step-item p{color:#b9c6d8;font-size:.82rem;line-height:1.5}.process-section-refined .step-item>svg{color:#a9d4ff} .trust-section-refined{background:#f3f6fa;gap:14px;padding:clamp(28px,4vw,52px) max(18px,calc((100vw - 1240px)/2))}.trust-section-refined .trust-card{min-height:165px;border:1px solid rgba(32,57,86,.12);border-radius:14px;padding:25px;box-shadow:0 12px 28px rgba(16,30,51,.07)}.trust-section-refined .trust-card h3{font-size:clamp(1.1rem,1.6vw,1.4rem);letter-spacing:-.025em}.trust-section-refined .trust-card p{font-size:.82rem;line-height:1.55}.trust-section-refined .trust-dark{background:#22324c;color:#fff}.trust-section-refined .trust-dark p{color:#d0dae8}.trust-section-refined .trust-lime{background:#e8f0ea;color:#183527}.trust-section-refined .trust-coral{background:#f3e8e5;color:#552f2a} .support-cta-refined{min-height:450px;padding:clamp(66px,8vw,112px) max(24px,calc((100vw - 1240px)/2));background:linear-gradient(125deg,#132039 0%,#1c2c53 50%,#3a3670 100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);column-gap:clamp(38px,7vw,110px);align-items:center}.support-cta-refined:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 30%,rgba(156,215,189,.16),transparent 26%),radial-gradient(circle at 15% 88%,rgba(234,164,154,.12),transparent 25%);pointer-events:none}.support-cta-refined>*{position:relative;z-index:1}.support-cta-refined .section-marker,.support-cta-refined h2,.support-cta-refined>p,.support-cta-refined .storefront-email-interest,.support-cta-refined .support-cta-actions{grid-column:1}.support-cta-refined h2{max-width:12ch;font-size:clamp(2rem,3vw,3.15rem);line-height:.96;letter-spacing:-.055em}.support-cta-refined h2 em{color:#a3d8bd}.support-cta-refined p{color:#c9d6e7;font-size:clamp(.8rem,1.2vw,.98rem);line-height:1.65}.support-cta-refined p b{color:#a9d4ff;font-size:.66rem;letter-spacing:.11em}.storefront-email-interest{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.82fr) auto;gap:9px 10px;margin-top:22px;max-width:590px;padding:14px;border:1px solid rgba(215,231,250,.23);border-radius:13px;background:rgba(10,18,35,.3);backdrop-filter:blur(9px)}.storefront-email-interest>div{grid-column:1/-1;display:grid;gap:3px}.storefront-email-interest>div span{color:#a3d8bd;font-size:.65rem;font-weight:800;letter-spacing:.1em}.storefront-email-interest>div strong{color:#f5f8fc;font-size:.86rem}.storefront-email-interest>div small{color:#bed0e6;font-size:.67rem;line-height:1.45}.storefront-email-interest input[type="email"]{width:100%;min-height:40px;border:1px solid rgba(222,235,250,.3);border-radius:8px;background:rgba(255,255,255,.08);color:#f5f8fc;padding:0 12px;font:inherit;font-size:.78rem}.storefront-email-interest input[type="email"]::placeholder{color:#b9c7d9}.email-consent{display:flex;align-items:center;gap:7px;color:#c7d5e7;font-size:.66rem;line-height:1.35}.email-consent input{accent-color:#a3d8bd}.storefront-email-interest button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:8px;background:#a3d8bd;color:#102135;padding:0 13px;font-size:.7rem;font-weight:800;white-space:nowrap}.storefront-email-interest button:disabled{opacity:.65;cursor:wait}.support-cta-actions{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:25px}.support-cta-actions a{display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:13px 16px;font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;transition:transform .18s var(--ease-out),background .18s var(--ease-out)}.support-cta-actions a:first-child{background:#a3d8bd;color:#102135}.support-cta-actions a:last-child{border:1px solid rgba(226,237,249,.55);color:#f2f6fb}.support-cta-actions a:hover{transform:translateY(-2px)} .marketplace-summary{grid-column:2;grid-row:1 / span 4;display:grid;gap:9px;padding:18px;border:1px solid rgba(220,231,248,.22);border-radius:16px;background:rgba(12,20,38,.42);box-shadow:0 18px 42px rgba(8,13,26,.2);backdrop-filter:blur(10px)}.marketplace-summary-head{display:flex;align-items:baseline;justify-content:space-between;padding:2px 3px 9px}.marketplace-summary-head span{color:#fff;font-weight:800;letter-spacing:.02em;font-size:.92rem}.marketplace-summary-head small{color:#b7c7dd;font-size:.64rem}.summary-choice{display:grid;grid-template-columns:28px minmax(0,1fr) 18px;align-items:center;gap:10px;text-align:left;border:1px solid rgba(232,241,250,.14);border-radius:10px;background:rgba(255,255,255,.045);color:#eef5ff;padding:12px 13px;transition:transform .18s var(--ease-out),background .18s var(--ease-out),border-color .18s var(--ease-out)}.summary-choice:hover{transform:translateX(3px);background:rgba(255,255,255,.09)}.summary-choice span{display:grid;gap:2px}.summary-choice strong{font-size:.8rem}.summary-choice small{color:#c8d4e4;font-size:.67rem}.summary-choice-blue{border-left:3px solid #78b8ff}.summary-choice-blue>svg{color:#78b8ff}.summary-choice-violet{border-left:3px solid #b9a7ff}.summary-choice-violet>svg{color:#b9a7ff}.summary-choice-mint{border-left:3px solid #a3d8bd}.summary-choice-mint>svg{color:#a3d8bd}.summary-choice-coral{border-left:3px solid #eaa49a}.summary-choice-coral>svg{color:#eaa49a} .why-vamnux-section{scroll-margin-top:9rem;padding:clamp(50px,7vw,94px) max(20px,calc((100vw - 1240px)/2));background:linear-gradient(145deg,#edf3ff 0%,#f8fbff 47%,#f0f7f3 100%);color:#132038}.why-vamnux-heading{display:grid;grid-template-columns:minmax(0,.95fr) minmax(320px,.75fr);gap:clamp(30px,6vw,96px);align-items:end;max-width:1240px;margin:0 auto 30px}.why-vamnux-heading .section-marker{color:#2a63d4}.why-vamnux-heading h2{margin:9px 0 0;font-size:clamp(2rem,4.1vw,4rem);line-height:.9;letter-spacing:-.065em}.why-vamnux-heading h2 em{color:#296df5}.why-vamnux-heading>div:last-child>p{margin:0;color:#52627b;font-size:clamp(.82rem,1.25vw,.98rem);line-height:1.65}.why-vamnux-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.why-vamnux-actions button{display:inline-flex;align-items:center;gap:8px;border:1px solid #c5d4ee;border-radius:8px;background:#fff;color:#263a5d;padding:11px 13px;font-size:.7rem;font-weight:850;letter-spacing:.045em;text-transform:uppercase;transition:transform .18s var(--ease-out),background .18s var(--ease-out),border-color .18s var(--ease-out)}.why-vamnux-actions button:first-child{border-color:#286dff;background:#286dff;color:#fff}.why-vamnux-actions button:hover{transform:translateY(-2px);border-color:#286dff}.why-vamnux-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;max-width:1240px;margin:auto}.why-vamnux-card{display:grid;grid-template-columns:40px minmax(0,1fr);gap:13px;min-height:166px;padding:19px;border:1px solid rgba(30,57,98,.12);border-radius:13px;background:rgba(255,255,255,.78);box-shadow:0 12px 28px rgba(31,62,106,.06);transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out)}.why-vamnux-card:hover{transform:translateY(-3px);box-shadow:0 16px 33px rgba(31,62,106,.12)}.why-vamnux-card:nth-child(1),.why-vamnux-card:nth-child(2),.why-vamnux-card:nth-child(3){grid-column:span 4}.why-vamnux-card:nth-child(4){grid-column:3/span 4}.why-vamnux-card:nth-child(5){grid-column:7/span 4}.why-vamnux-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:10px}.why-vamnux-card p{margin:2px 0 7px;font-size:.61rem;font-weight:850;letter-spacing:.1em}.why-vamnux-card h3{margin:0;color:#17223a;font-size:1.02rem;letter-spacing:-.025em}.why-vamnux-card div>span{display:block;margin-top:7px;color:#63708a;font-size:.76rem;line-height:1.5}.trust-payment .why-vamnux-icon{background:#e8f0ff;color:#286dff}.trust-payment p{color:#286dff}.trust-fulfillment .why-vamnux-icon{background:#eff9dc;color:#4b7d17}.trust-fulfillment p{color:#5b861e}.trust-pricing .why-vamnux-icon{background:#f2eaff;color:#7b54c5}.trust-pricing p{color:#8057cc}.trust-orders .why-vamnux-icon{background:#e7f7f5;color:#178677}.trust-orders p{color:#178677}.trust-support .why-vamnux-icon{background:#fff0eb;color:#d45f48}.trust-support p{color:#d45f48} @media (max-width:760px){.process-section-refined{padding:58px 22px;gap:35px}.process-section-refined .process-intro h2{font-size:clamp(2.45rem,13vw,3.55rem)}.support-cta-refined h2{font-size:clamp(1.95rem,8.8vw,2.55rem)}.process-section-refined .step-item{padding:17px 0}.process-section-refined .step-item h3{font-size:1.05rem}.trust-section-refined{padding:22px 17px;gap:10px}.trust-section-refined .trust-card{min-height:0;padding:20px}.why-vamnux-section{padding:48px 18px}.why-vamnux-heading{grid-template-columns:1fr;gap:18px;margin-bottom:19px}.why-vamnux-heading h2{font-size:clamp(2.2rem,12vw,3.1rem)}.why-vamnux-actions{display:grid;grid-template-columns:1fr}.why-vamnux-actions button{justify-content:center;min-height:42px}.why-vamnux-grid{grid-template-columns:1fr;gap:9px}.why-vamnux-card,.why-vamnux-card:nth-child(n){grid-column:auto;min-height:0;padding:17px;grid-template-columns:36px minmax(0,1fr);gap:11px}.why-vamnux-icon{width:36px;height:36px}.why-vamnux-card h3{font-size:.98rem}.why-vamnux-card div>span{font-size:.73rem}.support-cta-refined{min-height:0;padding:66px 22px;display:block}.storefront-email-interest{grid-template-columns:1fr;max-width:none;padding:13px}.storefront-email-interest button{min-height:42px}.support-cta-actions{align-items:stretch;flex-direction:column}.support-cta-actions a{justify-content:center}.marketplace-summary{margin-top:30px;padding:13px}.marketplace-summary-head{padding:2px 2px 7px}.summary-choice{padding:11px 12px}.summary-choice strong{font-size:.76rem}.summary-choice small{font-size:.64rem}} .mobile-category-menu{display:none}.mobile-category-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;background:#10131b;color:#fff;padding:13px 18px;font:inherit;font-size:.78rem;font-weight:800;letter-spacing:.02em}.mobile-category-trigger>span:nth-child(2){margin-right:auto}.mobile-category-lines{display:grid;gap:3px;width:24px;height:24px;place-content:center;border:1px solid rgba(184,255,67,.6);border-radius:50%}.mobile-category-lines i{display:block;width:11px;height:2px;border-radius:99px;background:linear-gradient(90deg,#b8ff43,#75a3ff)}.mobile-category-chevron{transition:transform .18s var(--ease-out)}.mobile-category-chevron.open{transform:rotate(180deg)}.mobile-category-drawer{display:none;background:#11151f;border-bottom:1px solid rgba(184,255,67,.3);box-shadow:0 14px 28px rgba(10,13,20,.22)}.mobile-category-drawer[data-open="true"]{display:grid}.mobile-category-all{display:flex;align-items:center;justify-content:space-between;gap:8px;width:calc(100% - 24px);margin:12px;border:1px solid rgba(184,255,67,.46);background:linear-gradient(90deg,rgba(184,255,67,.18),rgba(58,112,255,.12));color:#eaffe1;padding:12px;font:inherit;font-size:.74rem;font-weight:800;text-align:left}.mobile-category-list{border-top:1px solid rgba(255,255,255,.08)}.mobile-category-list details{border-bottom:1px solid rgba(255,255,255,.08)}.mobile-category-list summary{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;padding:13px 18px;color:#f3f6fc;font-size:.77rem;font-weight:800;cursor:pointer}.mobile-category-list summary::-webkit-details-marker{display:none}.mobile-category-list summary span{display:flex;align-items:center;gap:9px}.mobile-category-list summary svg:first-child{color:#b8ff43}.mobile-category-list details[open] summary{background:rgba(75,101,184,.13)}.mobile-category-list details>div{display:grid;gap:8px;padding:0 18px 14px;background:rgba(255,255,255,.025)}.mobile-category-list details>div>button{display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:transparent;color:#a8c5ff;padding:8px 0;font:inherit;font-size:.72rem;font-weight:800;text-align:left}.mobile-category-quick-links{display:flex;flex-wrap:wrap;gap:6px}.mobile-category-quick-links button{border:1px solid rgba(255,255,255,.13);border-radius:999px;background:#1a2130;color:#cbd6e9;padding:6px 8px;font:inherit;font-size:.64rem}.mobile-category-list p{margin:0;color:#95a4bc;font-size:.68rem;line-height:1.45}.mobile-category-status{display:flex;align-items:center;gap:7px;padding:13px 18px;color:#96a9c7;font-size:.65rem;line-height:1.4}.mobile-category-status svg{color:#b8ff43;flex:none}@media(max-width:760px){.commerce-header .compact-category-nav{display:none!important}.mobile-category-menu{display:block}}@media(min-width:761px){.mobile-category-menu{display:none!important}} .games-platform-browser { display: grid; gap: 10px; width: min(1376px, 100%); margin: 13px auto 0; padding: 13px 15px 11px; border: 1px solid #d8e1ee; background: linear-gradient(135deg, #fbfdff, #f1f6ff); box-shadow: 0 8px 18px rgba(22, 53, 103, 0.05); } .games-platform-browser-heading { display: flex; align-items: baseline; gap: 9px; } .games-platform-browser-heading span { color: #286dff; font-size: 9px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .games-platform-browser-heading strong { color: #1c2941; font-family: "Nunito Sans", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -0.025em; } .games-platform-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 1px 1px 6px; scrollbar-width: thin; } .games-platform-tab { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #d8e0ec; border-radius: 9px; background: #fff; color: #53627b; cursor: pointer; font-size: 10px; font-weight: 800; transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out); } .games-platform-tab > span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 6px; background: #e8effb; color: #286dff; font-family: "Nunito Sans", sans-serif; font-size: 9px; font-weight: 900; } .games-platform-tab:hover, .games-platform-tab:focus-visible { border-color: #91b5ff; color: #173e95; outline: none; } .games-platform-tab:active { transform: scale(0.97); } .games-platform-tab.active { border-color: #173e95; background: #17233c; color: #fff; box-shadow: 0 7px 13px rgba(23, 62, 149, 0.18); } .games-platform-tab.active > span { background: #c7ff47; color: #17233c; } .games-platform-browser > p { margin: 0; color: #687891; font-size: 10px; line-height: 1.45; } @media (max-width: 760px) { .games-platform-browser { gap: 8px; margin-top: 10px; padding: 11px 12px 10px; } .games-platform-browser-heading strong { font-size: 14px; } .games-platform-tabs { gap: 6px; margin-right: -12px; padding-right: 12px; } .games-platform-tab { min-height: 36px; padding: 0 10px; font-size: 9px; } .games-platform-browser > p { font-size: 9px; } } .cart-fulfillment-fields { display: grid; gap: 9px; margin: 0 0 14px; } .cart-fulfillment-fields label { display: grid; gap: 5px; color: #4b5569; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; line-height: 1.25; text-transform: uppercase; } .cart-fulfillment-fields input { min-height: 37px; width: 100%; border: 1px solid #cbd1dc; background: #fff; color: #10121a; font: inherit; font-size: 12px; letter-spacing: 0; padding: 9px 10px; text-transform: none; } .cart-fulfillment-fields input:focus-visible { outline: 2px solid #286dff; outline-offset: 2px; } .cart-checkout button:disabled { cursor: not-allowed; opacity: 0.65; } @layer components; /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */ @layer properties { @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { *, :before, :after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-divide-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-content: ""; --tw-animation-delay: 0s; --tw-animation-direction: normal; --tw-animation-duration: initial; --tw-animation-fill-mode: none; --tw-animation-iteration-count: 1; --tw-enter-blur: 0; --tw-enter-opacity: 1; --tw-enter-rotate: 0; --tw-enter-scale: 1; --tw-enter-translate-x: 0; --tw-enter-translate-y: 0; --tw-exit-blur: 0; --tw-exit-opacity: 1; --tw-exit-rotate: 0; --tw-exit-scale: 1; --tw-exit-translate-x: 0; --tw-exit-translate-y: 0; } } } @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-100: oklch(93.6% .032 17.717); --color-red-500: oklch(63.7% .237 25.331); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-900: oklch(41.4% .112 45.904); --color-sky-300: oklch(82.8% .111 230.318); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-800: oklch(45.5% .188 13.697); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-900: oklch(20.8% .042 265.755); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-6xl: 72rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-widest: .1em; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --radius-xs: .125rem; --radius-2xl: 1rem; --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --blur-sm: 8px; --blur-2xl: 40px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-border: var(--border); } } @layer base { *, :after, :before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -.25em; } sup { top: -.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit { padding-block: 0; } ::-webkit-datetime-edit-year-field { padding-block: 0; } ::-webkit-datetime-edit-month-field { padding-block: 0; } ::-webkit-datetime-edit-day-field { padding-block: 0; } ::-webkit-datetime-edit-hour-field { padding-block: 0; } ::-webkit-datetime-edit-minute-field { padding-block: 0; } ::-webkit-datetime-edit-second-field { padding-block: 0; } ::-webkit-datetime-edit-millisecond-field { padding-block: 0; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { .\@container\/card-header { container: card-header / inline-size; } .\@container\/field-group { container: field-group / inline-size; } .pointer-events-none { pointer-events: none; } .invisible { visibility: hidden; } .visible { visibility: visible; } .sr-only { clip-path: inset(50%); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .inset-0 { inset: calc(var(--spacing) * 0); } .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } .inset-y-0 { inset-block: calc(var(--spacing) * 0); } .-top-12 { top: calc(var(--spacing) * -12); } .top-0 { top: calc(var(--spacing) * 0); } .top-1\.5 { top: calc(var(--spacing) * 1.5); } .top-1\/2 { top: 50%; } .top-3 { top: calc(var(--spacing) * 3); } .top-3\.5 { top: calc(var(--spacing) * 3.5); } .top-4 { top: calc(var(--spacing) * 4); } .top-\[1px\] { top: 1px; } .top-\[50\%\] { top: 50%; } .top-\[60\%\] { top: 60%; } .top-full { top: 100%; } .-right-12 { right: calc(var(--spacing) * -12); } .right-0 { right: calc(var(--spacing) * 0); } .right-1 { right: calc(var(--spacing) * 1); } .right-2 { right: calc(var(--spacing) * 2); } .right-3 { right: calc(var(--spacing) * 3); } .right-4 { right: calc(var(--spacing) * 4); } .-bottom-12 { bottom: calc(var(--spacing) * -12); } .bottom-0 { bottom: calc(var(--spacing) * 0); } .bottom-4 { bottom: calc(var(--spacing) * 4); } .-left-12 { left: calc(var(--spacing) * -12); } .left-0 { left: calc(var(--spacing) * 0); } .left-1\/2 { left: 50%; } .left-2 { left: calc(var(--spacing) * 2); } .left-4 { left: calc(var(--spacing) * 4); } .left-\[50\%\] { left: 50%; } .isolate { isolation: isolate; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-\[1\] { z-index: 1; } .order-first { order: -9999; } .order-last { order: 9999; } .col-start-2 { grid-column-start: 2; } .row-span-2 { grid-row: span 2 / span 2; } .row-start-1 { grid-row-start: 1; } .container { width: 100%; } @media (min-width: 40rem) { .container { max-width: 40rem; } } @media (min-width: 48rem) { .container { max-width: 48rem; } } @media (min-width: 64rem) { .container { max-width: 64rem; } } @media (min-width: 80rem) { .container { max-width: 80rem; } } @media (min-width: 96rem) { .container { max-width: 96rem; } } .\!m-0 { margin: calc(var(--spacing) * 0) !important; } .m-5 { margin: calc(var(--spacing) * 5); } .m-6 { margin: calc(var(--spacing) * 6); } .-mx-1 { margin-inline: calc(var(--spacing) * -1); } .mx-2 { margin-inline: calc(var(--spacing) * 2); } .mx-3\.5 { margin-inline: calc(var(--spacing) * 3.5); } .mx-4 { margin-inline: calc(var(--spacing) * 4); } .mx-auto { margin-inline: auto; } .-my-2 { margin-block: calc(var(--spacing) * -2); } .my-0 { margin-block: calc(var(--spacing) * 0); } .my-0\.5 { margin-block: calc(var(--spacing) * .5); } .my-1 { margin-block: calc(var(--spacing) * 1); } .my-6 { margin-block: calc(var(--spacing) * 6); } .-mt-4 { margin-top: calc(var(--spacing) * -4); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-5 { margin-top: calc(var(--spacing) * 5); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-7 { margin-top: calc(var(--spacing) * 7); } .mt-12 { margin-top: calc(var(--spacing) * 12); } .mt-auto { margin-top: auto; } .mr-2 { margin-right: calc(var(--spacing) * 2); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .-ml-4 { margin-left: calc(var(--spacing) * -4); } .ml-1 { margin-left: calc(var(--spacing) * 1); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-4 { margin-left: calc(var(--spacing) * 4); } .ml-auto { margin-left: auto; } .line-clamp-1 { -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .line-clamp-2 { -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .block { display: block; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline-flex { display: inline-flex; } .table { display: table; } .table-caption { display: table-caption; } .table-cell { display: table-cell; } .table-row { display: table-row; } .field-sizing-content { field-sizing: content; } .aspect-square { aspect-ratio: 1; } .aspect-video { aspect-ratio: var(--aspect-video); } .size-\(--cell-size\) { width: var(--cell-size); height: var(--cell-size); } .size-2 { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } .size-2\.5 { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); } .size-3 { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .size-3\.5 { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } .size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .size-6 { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } .size-7 { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); } .size-8 { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } .size-9 { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } .size-10 { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } .size-12 { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); } .size-auto { width: auto; height: auto; } .size-full { width: 100%; height: 100%; } .h-\(--cell-size\) { height: var(--cell-size); } .h-1\.5 { height: calc(var(--spacing) * 1.5); } .h-2 { height: calc(var(--spacing) * 2); } .h-2\.5 { height: calc(var(--spacing) * 2.5); } .h-3 { height: calc(var(--spacing) * 3); } .h-4 { height: calc(var(--spacing) * 4); } .h-5 { height: calc(var(--spacing) * 5); } .h-6 { height: calc(var(--spacing) * 6); } .h-7 { height: calc(var(--spacing) * 7); } .h-8 { height: calc(var(--spacing) * 8); } .h-9 { height: calc(var(--spacing) * 9); } .h-10 { height: calc(var(--spacing) * 10); } .h-11 { height: calc(var(--spacing) * 11); } .h-12 { height: calc(var(--spacing) * 12); } .h-14 { height: calc(var(--spacing) * 14); } .h-16 { height: calc(var(--spacing) * 16); } .h-20 { height: calc(var(--spacing) * 20); } .h-24 { height: calc(var(--spacing) * 24); } .h-32 { height: calc(var(--spacing) * 32); } .h-44 { height: calc(var(--spacing) * 44); } .h-52 { height: calc(var(--spacing) * 52); } .h-64 { height: calc(var(--spacing) * 64); } .h-\[1\.15rem\] { height: 1.15rem; } .h-\[38px\] { height: 38px; } .h-\[200px\] { height: 200px; } .h-\[500px\] { height: 500px; } .h-\[calc\(100\%-1px\)\] { height: calc(100% - 1px); } .h-\[var\(--radix-navigation-menu-viewport-height\)\] { height: var(--radix-navigation-menu-viewport-height); } .h-\[var\(--radix-select-trigger-height\)\] { height: var(--radix-select-trigger-height); } .h-auto { height: auto; } .h-full { height: 100%; } .h-px { height: 1px; } .h-svh { height: 100svh; } .max-h-\(--radix-context-menu-content-available-height\) { max-height: var(--radix-context-menu-content-available-height); } .max-h-\(--radix-dropdown-menu-content-available-height\) { max-height: var(--radix-dropdown-menu-content-available-height); } .max-h-\(--radix-select-content-available-height\) { max-height: var(--radix-select-content-available-height); } .max-h-32 { max-height: calc(var(--spacing) * 32); } .max-h-\[300px\] { max-height: 300px; } .min-h-0 { min-height: calc(var(--spacing) * 0); } .min-h-4 { min-height: calc(var(--spacing) * 4); } .min-h-9 { min-height: calc(var(--spacing) * 9); } .min-h-16 { min-height: calc(var(--spacing) * 16); } .min-h-20 { min-height: calc(var(--spacing) * 20); } .min-h-24 { min-height: calc(var(--spacing) * 24); } .min-h-28 { min-height: calc(var(--spacing) * 28); } .min-h-\[200px\] { min-height: 200px; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .min-h-svh { min-height: 100svh; } .w-\(--cell-size\) { width: var(--cell-size); } .w-\(--sidebar-width\) { width: var(--sidebar-width); } .w-0 { width: calc(var(--spacing) * 0); } .w-1 { width: calc(var(--spacing) * 1); } .w-1\/2 { width: 50%; } .w-2 { width: calc(var(--spacing) * 2); } .w-2\.5 { width: calc(var(--spacing) * 2.5); } .w-3 { width: calc(var(--spacing) * 3); } .w-3\/4 { width: 75%; } .w-4 { width: calc(var(--spacing) * 4); } .w-5 { width: calc(var(--spacing) * 5); } .w-8 { width: calc(var(--spacing) * 8); } .w-9 { width: calc(var(--spacing) * 9); } .w-10 { width: calc(var(--spacing) * 10); } .w-12 { width: calc(var(--spacing) * 12); } .w-16 { width: calc(var(--spacing) * 16); } .w-20 { width: calc(var(--spacing) * 20); } .w-24 { width: calc(var(--spacing) * 24); } .w-32 { width: calc(var(--spacing) * 32); } .w-48 { width: calc(var(--spacing) * 48); } .w-52 { width: calc(var(--spacing) * 52); } .w-64 { width: calc(var(--spacing) * 64); } .w-72 { width: calc(var(--spacing) * 72); } .w-\[38px\] { width: 38px; } .w-\[100px\] { width: 100px; } .w-\[280px\] { width: 280px; } .w-\[400px\] { width: 400px; } .w-auto { width: auto; } .w-fit { width: fit-content; } .w-full { width: 100%; } .w-max { width: max-content; } .w-px { width: 1px; } .max-w-\(--skeleton-width\) { max-width: var(--skeleton-width); } .max-w-2xl { max-width: var(--container-2xl); } .max-w-3xl { max-width: var(--container-3xl); } .max-w-4xl { max-width: var(--container-4xl); } .max-w-6xl { max-width: var(--container-6xl); } .max-w-\[80\%\] { max-width: 80%; } .max-w-\[calc\(100\%-2rem\)\] { max-width: calc(100% - 2rem); } .max-w-lg { max-width: var(--container-lg); } .max-w-max { max-width: max-content; } .max-w-md { max-width: var(--container-md); } .max-w-none { max-width: none; } .max-w-sm { max-width: var(--container-sm); } .max-w-xl { max-width: var(--container-xl); } .max-w-xs { max-width: var(--container-xs); } .min-w-\(--cell-size\) { min-width: var(--cell-size); } .min-w-0 { min-width: calc(var(--spacing) * 0); } .min-w-5 { min-width: calc(var(--spacing) * 5); } .min-w-8 { min-width: calc(var(--spacing) * 8); } .min-w-9 { min-width: calc(var(--spacing) * 9); } .min-w-10 { min-width: calc(var(--spacing) * 10); } .min-w-12 { min-width: calc(var(--spacing) * 12); } .min-w-\[8rem\] { min-width: 8rem; } .min-w-\[12rem\] { min-width: 12rem; } .min-w-\[var\(--radix-select-trigger-width\)\] { min-width: var(--radix-select-trigger-width); } .flex-1 { flex: 1; } .flex-shrink-0, .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; } .grow-0 { flex-grow: 0; } .basis-full { flex-basis: 100%; } .caption-bottom { caption-side: bottom; } .border-collapse { border-collapse: collapse; } .origin-\(--radix-context-menu-content-transform-origin\) { transform-origin: var(--radix-context-menu-content-transform-origin); } .origin-\(--radix-dropdown-menu-content-transform-origin\) { transform-origin: var(--radix-dropdown-menu-content-transform-origin); } .origin-\(--radix-hover-card-content-transform-origin\) { transform-origin: var(--radix-hover-card-content-transform-origin); } .origin-\(--radix-menubar-content-transform-origin\) { transform-origin: var(--radix-menubar-content-transform-origin); } .origin-\(--radix-popover-content-transform-origin\) { transform-origin: var(--radix-popover-content-transform-origin); } .origin-\(--radix-select-content-transform-origin\) { transform-origin: var(--radix-select-content-transform-origin); } .origin-\(--radix-tooltip-content-transform-origin\) { transform-origin: var(--radix-tooltip-content-transform-origin); } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-x-px { --tw-translate-x: -1px; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-\[-50\%\] { --tw-translate-x: -50%; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-px { --tw-translate-x: 1px; translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-0\.5 { --tw-translate-y: calc(var(--spacing) * .5); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-\[-50\%\] { --tw-translate-y: -50%; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-\[calc\(-50\%_-_2px\)\] { --tw-translate-y: calc(-50% - 2px); translate: var(--tw-translate-x) var(--tw-translate-y); } .rotate-45 { rotate: 45deg; } .rotate-90 { rotate: 90deg; } .transform { transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .animate-caret-blink { animation: 1.25s ease-out infinite caret-blink; } .animate-in { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); } .animate-pulse { animation: var(--animate-pulse); } .animate-spin { animation: var(--animate-spin); } .cursor-col-resize { cursor: col-resize; } .cursor-default { cursor: default; } .cursor-not-allowed { cursor: not-allowed; } .cursor-pointer { cursor: pointer; } .cursor-text { cursor: text; } .touch-none { touch-action: none; } .resize { resize: both; } .resize-none { resize: none; } .scroll-my-1 { scroll-margin-block: calc(var(--spacing) * 1); } .scroll-py-1 { scroll-padding-block: calc(var(--spacing) * 1); } .list-disc { list-style-type: disc; } .list-none { list-style-type: none; } .auto-rows-min { grid-auto-rows: min-content; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-\[0_1fr\] { grid-template-columns: 0 1fr; } .grid-rows-\[auto_auto\] { grid-template-rows: auto auto; } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .items-stretch { align-items: stretch; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; } .justify-items-start { justify-items: start; } .gap-0 { gap: calc(var(--spacing) * 0); } .gap-0\.5 { gap: calc(var(--spacing) * .5); } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-2\.5 { gap: calc(var(--spacing) * 2.5); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-7 { gap: calc(var(--spacing) * 7); } .gap-8 { gap: calc(var(--spacing) * 8); } :where(.space-y-1 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-2 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-3 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-4 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-6 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-12 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-x-2 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); } .gap-y-0\.5 { row-gap: calc(var(--spacing) * .5); } :where(.divide-y > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } :where(.divide-slate-100 > :not(:last-child)) { border-color: var(--color-slate-100); } :where(.divide-white\/10 > :not(:last-child)) { border-color: #ffffff1a; } @supports (color: color-mix(in lab, red, red)) { :where(.divide-white\/10 > :not(:last-child)) { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .self-start { align-self: flex-start; } .self-stretch { align-self: stretch; } .justify-self-end { justify-self: flex-end; } .truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-auto { overflow-y: auto; } .rounded { border-radius: .25rem; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-\[2px\] { border-radius: 2px; } .rounded-\[4px\] { border-radius: 4px; } .rounded-\[10px\] { border-radius: 10px; } .rounded-\[20px\] { border-radius: 20px; } .rounded-\[calc\(var\(--radius\)-5px\)\] { border-radius: calc(var(--radius) - 5px); } .rounded-\[inherit\] { border-radius: inherit; } .rounded-full { border-radius: 3.40282e38px; } .rounded-lg { border-radius: var(--radius); } .rounded-md { border-radius: calc(var(--radius) - 2px); } .rounded-none { border-radius: 0; } .rounded-sm { border-radius: calc(var(--radius) - 4px); } .rounded-xl { border-radius: calc(var(--radius) + 4px); } .rounded-xs { border-radius: var(--radius-xs); } .rounded-t-lg { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .rounded-l-md { border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .rounded-tl-sm { border-top-left-radius: calc(var(--radius) - 4px); } .rounded-r-md { border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-\[1\.5px\] { border-style: var(--tw-border-style); border-width: 1.5px; } .border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-t-2 { border-top-style: var(--tw-border-style); border-top-width: 2px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-r-0 { border-right-style: var(--tw-border-style); border-right-width: 0; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .border-dashed { --tw-border-style: dashed; border-style: dashed; } .border-\(--color-border\) { border-color: var(--color-border); } .border-\[\#286dff\] { border-color: #286dff; } .border-\[\#286dff\]\/30 { border-color: oklab(58.2442% -.0294266 -.226175 / .3); } .border-\[\#286dff\]\/35 { border-color: oklab(58.2442% -.0294266 -.226175 / .35); } .border-\[\#286dff\]\/40 { border-color: oklab(58.2442% -.0294266 -.226175 / .4); } .border-\[\#286dff\]\/60 { border-color: oklab(58.2442% -.0294266 -.226175 / .6); } .border-\[\#10121a\] { border-color: #10121a; } .border-\[\#10121a\]\/10 { border-color: oklab(18.3983% .00108735 -.0166799 / .1); } .border-\[\#b8ff43\] { border-color: #b8ff43; } .border-\[\#b8ff43\]\/20 { border-color: oklab(92.0307% -.136562 .17154 / .2); } .border-\[\#b8ff43\]\/25 { border-color: oklab(92.0307% -.136562 .17154 / .25); } .border-\[\#b8ff43\]\/30 { border-color: oklab(92.0307% -.136562 .17154 / .3); } .border-\[\#b8ff43\]\/50 { border-color: oklab(92.0307% -.136562 .17154 / .5); } .border-\[\#b8ff43\]\/70 { border-color: oklab(92.0307% -.136562 .17154 / .7); } .border-\[\#b8ff43\]\/80 { border-color: oklab(92.0307% -.136562 .17154 / .8); } .border-\[\#ef7777\]\/30 { border-color: oklab(70.7886% .13795 .054446 / .3); } .border-\[\#f4a11a\]\/45 { border-color: oklab(77.3127% .0516886 .152431 / .45); } .border-\[\#ffcd52\]\/35 { border-color: oklab(87.0613% .00929412 .147499 / .35); } .border-\[\#ffce56\]\/40 { border-color: oklab(87.2897% .00891441 .145209 / .4); } .border-\[rgba\(0\,0\,0\,0\.08\)\] { border-color: #00000014; } .border-amber-100 { border-color: var(--color-amber-100); } .border-amber-200 { border-color: var(--color-amber-200); } .border-amber-300 { border-color: var(--color-amber-300); } .border-amber-300\/30 { border-color: #ffd2364d; } @supports (color: color-mix(in lab, red, red)) { .border-amber-300\/30 { border-color: color-mix(in oklab, var(--color-amber-300) 30%, transparent); } } .border-border, .border-border\/50 { border-color: var(--border); } @supports (color: color-mix(in lab, red, red)) { .border-border\/50 { border-color: color-mix(in oklab, var(--border) 50%, transparent); } } .border-input { border-color: var(--input); } .border-primary { border-color: var(--primary); } .border-rose-200 { border-color: var(--color-rose-200); } .border-rose-200\/40 { border-color: #ffccd366; } @supports (color: color-mix(in lab, red, red)) { .border-rose-200\/40 { border-color: color-mix(in oklab, var(--color-rose-200) 40%, transparent); } } .border-rose-300 { border-color: var(--color-rose-300); } .border-rose-300\/40 { border-color: #ffa2ae66; } @supports (color: color-mix(in lab, red, red)) { .border-rose-300\/40 { border-color: color-mix(in oklab, var(--color-rose-300) 40%, transparent); } } .border-rose-400 { border-color: var(--color-rose-400); } .border-rose-400\/40 { border-color: #ff667f66; } @supports (color: color-mix(in lab, red, red)) { .border-rose-400\/40 { border-color: color-mix(in oklab, var(--color-rose-400) 40%, transparent); } } .border-rose-400\/50 { border-color: #ff667f80; } @supports (color: color-mix(in lab, red, red)) { .border-rose-400\/50 { border-color: color-mix(in oklab, var(--color-rose-400) 50%, transparent); } } .border-sky-300 { border-color: var(--color-sky-300); } .border-slate-100 { border-color: var(--color-slate-100); } .border-slate-200 { border-color: var(--color-slate-200); } .border-slate-300 { border-color: var(--color-slate-300); } .border-slate-600 { border-color: var(--color-slate-600); } .border-transparent { border-color: #0000; } .border-violet-400\/60 { border-color: #a685ff99; } @supports (color: color-mix(in lab, red, red)) { .border-violet-400\/60 { border-color: color-mix(in oklab, var(--color-violet-400) 60%, transparent); } } .border-white\/10 { border-color: #ffffff1a; } @supports (color: color-mix(in lab, red, red)) { .border-white\/10 { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .border-white\/12 { border-color: #ffffff1f; } @supports (color: color-mix(in lab, red, red)) { .border-white\/12 { border-color: color-mix(in oklab, var(--color-white) 12%, transparent); } } .border-white\/15 { border-color: #ffffff26; } @supports (color: color-mix(in lab, red, red)) { .border-white\/15 { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } .border-white\/20 { border-color: #fff3; } @supports (color: color-mix(in lab, red, red)) { .border-white\/20 { border-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .border-t-transparent { border-top-color: #0000; } .border-l-transparent { border-left-color: #0000; } .bg-\(--color-bg\) { background-color: var(--color-bg); } .bg-\[\#0b0e16\] { background-color: #0b0e16; } .bg-\[\#0b0f18\] { background-color: #0b0f18; } .bg-\[\#0d111a\] { background-color: #0d111a; } .bg-\[\#0d1325\] { background-color: #0d1325; } .bg-\[\#1a1a19\] { background-color: #1a1a19; } .bg-\[\#121c18\] { background-color: #121c18; } .bg-\[\#286dff\] { background-color: #286dff; } .bg-\[\#10121a\] { background-color: #10121a; } .bg-\[\#22161b\] { background-color: #22161b; } .bg-\[\#111827\] { background-color: #111827; } .bg-\[\#121723\] { background-color: #121723; } .bg-\[\#171712\] { background-color: #171712; } .bg-\[\#b8ff43\] { background-color: #b8ff43; } .bg-\[\#b8ff43\]\/5 { background-color: oklab(92.0307% -.136562 .17154 / .05); } .bg-\[\#b8ff43\]\/10 { background-color: oklab(92.0307% -.136562 .17154 / .1); } .bg-\[\#eaf0ff\] { background-color: #eaf0ff; } .bg-\[\#eef3ff\] { background-color: #eef3ff; } .bg-\[\#f5f6f8\] { background-color: #f5f6f8; } .bg-\[\#f7f9ff\] { background-color: #f7f9ff; } .bg-\[\#f8f8f7\] { background-color: #f8f8f7; } .bg-\[\#ffce56\]\/5 { background-color: oklab(87.2897% .00891441 .145209 / .05); } .bg-accent { background-color: var(--accent); } .bg-amber-50 { background-color: var(--color-amber-50); } .bg-amber-300\/5 { background-color: #ffd2360d; } @supports (color: color-mix(in lab, red, red)) { .bg-amber-300\/5 { background-color: color-mix(in oklab, var(--color-amber-300) 5%, transparent); } } .bg-background, .bg-background\/50 { background-color: var(--background); } @supports (color: color-mix(in lab, red, red)) { .bg-background\/50 { background-color: color-mix(in oklab, var(--background) 50%, transparent); } } .bg-background\/95 { background-color: var(--background); } @supports (color: color-mix(in lab, red, red)) { .bg-background\/95 { background-color: color-mix(in oklab, var(--background) 95%, transparent); } } .bg-black\/20 { background-color: #0003; } @supports (color: color-mix(in lab, red, red)) { .bg-black\/20 { background-color: color-mix(in oklab, var(--color-black) 20%, transparent); } } .bg-black\/25 { background-color: #00000040; } @supports (color: color-mix(in lab, red, red)) { .bg-black\/25 { background-color: color-mix(in oklab, var(--color-black) 25%, transparent); } } .bg-black\/50 { background-color: #00000080; } @supports (color: color-mix(in lab, red, red)) { .bg-black\/50 { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .bg-blue-600 { background-color: var(--color-blue-600); } .bg-border { background-color: var(--border); } .bg-card { background-color: var(--card); } .bg-destructive { background-color: var(--destructive); } .bg-foreground { background-color: var(--foreground); } .bg-input { background-color: var(--input); } .bg-muted, .bg-muted\/50 { background-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .bg-muted\/50 { background-color: color-mix(in oklab, var(--muted) 50%, transparent); } } .bg-popover { background-color: var(--popover); } .bg-primary, .bg-primary\/10 { background-color: var(--primary); } @supports (color: color-mix(in lab, red, red)) { .bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); } } .bg-primary\/20 { background-color: var(--primary); } @supports (color: color-mix(in lab, red, red)) { .bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); } } .bg-red-100 { background-color: var(--color-red-100); } .bg-rose-50 { background-color: var(--color-rose-50); } .bg-rose-500\/10 { background-color: #ff23571a; } @supports (color: color-mix(in lab, red, red)) { .bg-rose-500\/10 { background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent); } } .bg-secondary { background-color: var(--secondary); } .bg-slate-50 { background-color: var(--color-slate-50); } .bg-slate-100 { background-color: var(--color-slate-100); } .bg-transparent { background-color: #0000; } .bg-violet-500 { background-color: var(--color-violet-500); } .bg-white { background-color: var(--color-white); } .bg-white\/5 { background-color: #ffffff0d; } @supports (color: color-mix(in lab, red, red)) { .bg-white\/5 { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .bg-white\/10 { background-color: #ffffff1a; } @supports (color: color-mix(in lab, red, red)) { .bg-white\/10 { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .bg-white\/80 { background-color: #fffc; } @supports (color: color-mix(in lab, red, red)) { .bg-white\/80 { background-color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .bg-white\/\[\.025\] { background-color: #ffffff06; } @supports (color: color-mix(in lab, red, red)) { .bg-white\/\[\.025\] { background-color: color-mix(in oklab, var(--color-white) 2.5%, transparent); } } .bg-gradient-to-br { --tw-gradient-position: to bottom right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-t { --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .from-\[\#5e3be1\] { --tw-gradient-from: #5e3be1; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-slate-50 { --tw-gradient-from: var(--color-slate-50); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-\[\#b8ff43\] { --tw-gradient-to: #b8ff43; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-slate-100 { --tw-gradient-to: var(--color-slate-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .fill-current { fill: currentColor; } .fill-foreground { fill: var(--foreground); } .fill-primary { fill: var(--primary); } .object-cover { object-fit: cover; } .p-0 { padding: calc(var(--spacing) * 0); } .p-1 { padding: calc(var(--spacing) * 1); } .p-2 { padding: calc(var(--spacing) * 2); } .p-3 { padding: calc(var(--spacing) * 3); } .p-3\.5 { padding: calc(var(--spacing) * 3.5); } .p-4 { padding: calc(var(--spacing) * 4); } .p-5 { padding: calc(var(--spacing) * 5); } .p-6 { padding: calc(var(--spacing) * 6); } .p-8 { padding: calc(var(--spacing) * 8); } .p-\[3px\] { padding: 3px; } .p-px { padding: 1px; } .px-\(--cell-size\) { padding-inline: var(--cell-size); } .px-1 { padding-inline: calc(var(--spacing) * 1); } .px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .py-0\.5 { padding-block: calc(var(--spacing) * .5); } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-5 { padding-block: calc(var(--spacing) * 5); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-8 { padding-block: calc(var(--spacing) * 8); } .pt-0 { padding-top: calc(var(--spacing) * 0); } .pt-1 { padding-top: calc(var(--spacing) * 1); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-8 { padding-top: calc(var(--spacing) * 8); } .pt-12 { padding-top: calc(var(--spacing) * 12); } .pr-1 { padding-right: calc(var(--spacing) * 1); } .pr-2 { padding-right: calc(var(--spacing) * 2); } .pr-2\.5 { padding-right: calc(var(--spacing) * 2.5); } .pr-3 { padding-right: calc(var(--spacing) * 3); } .pr-8 { padding-right: calc(var(--spacing) * 8); } .pr-10 { padding-right: calc(var(--spacing) * 10); } .pb-1 { padding-bottom: calc(var(--spacing) * 1); } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-5 { padding-bottom: calc(var(--spacing) * 5); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .pb-8 { padding-bottom: calc(var(--spacing) * 8); } .pl-2 { padding-left: calc(var(--spacing) * 2); } .pl-3 { padding-left: calc(var(--spacing) * 3); } .pl-4 { padding-left: calc(var(--spacing) * 4); } .pl-8 { padding-left: calc(var(--spacing) * 8); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .align-middle { vertical-align: middle; } .font-\[\'Barlow_Condensed\'\] { font-family: Barlow Condensed; } .font-mono { font-family: var(--font-mono); } .font-sans { font-family: var(--font-sans); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-sm\/relaxed { font-size: var(--text-sm); line-height: var(--leading-relaxed); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .text-\[0\.8rem\] { font-size: .8rem; } .text-\[9px\] { font-size: 9px; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-\[20px\] { font-size: 20px; } .leading-4 { --tw-leading: calc(var(--spacing) * 4); line-height: calc(var(--spacing) * 4); } .leading-5 { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } .leading-6 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .leading-\[26px\] { --tw-leading: 26px; line-height: 26px; } .leading-none { --tw-leading: 1; line-height: 1; } .leading-normal { --tw-leading: var(--leading-normal); line-height: var(--leading-normal); } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } .font-black { --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-extrabold { --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-\[-\.05em\] { --tw-tracking: -.05em; letter-spacing: -.05em; } .tracking-\[-0\.44px\] { --tw-tracking: -.44px; letter-spacing: -.44px; } .tracking-\[-0\.154px\] { --tw-tracking: -.154px; letter-spacing: -.154px; } .tracking-\[\.1em\] { --tw-tracking: .1em; letter-spacing: .1em; } .tracking-\[\.06em\] { --tw-tracking: .06em; letter-spacing: .06em; } .tracking-\[\.07em\] { --tw-tracking: .07em; letter-spacing: .07em; } .tracking-\[\.08em\] { --tw-tracking: .08em; letter-spacing: .08em; } .tracking-\[\.12em\] { --tw-tracking: .12em; letter-spacing: .12em; } .tracking-\[\.13em\] { --tw-tracking: .13em; letter-spacing: .13em; } .tracking-\[\.14em\] { --tw-tracking: .14em; letter-spacing: .14em; } .tracking-\[\.16em\] { --tw-tracking: .16em; letter-spacing: .16em; } .tracking-normal { --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } .text-balance { text-wrap: balance; } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .whitespace-break-spaces { white-space: break-spaces; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre-wrap { white-space: pre-wrap; } .text-\[\#7aa4ff\] { color: #7aa4ff; } .text-\[\#8e9aae\] { color: #8e9aae; } .text-\[\#286dff\] { color: #286dff; } .text-\[\#10121a\] { color: #10121a; } .text-\[\#34322d\] { color: #34322d; } .text-\[\#858481\] { color: #858481; } .text-\[\#aeb9cd\] { color: #aeb9cd; } .text-\[\#b8ff43\] { color: #b8ff43; } .text-\[\#c4cedd\] { color: #c4cedd; } .text-\[\#d7e0ef\] { color: #d7e0ef; } .text-\[\#dfffa4\] { color: #dfffa4; } .text-\[\#ff7864\] { color: #ff7864; } .text-\[\#ffb4b4\] { color: #ffb4b4; } .text-accent-foreground { color: var(--accent-foreground); } .text-amber-100 { color: var(--color-amber-100); } .text-amber-200 { color: var(--color-amber-200); } .text-amber-700 { color: var(--color-amber-700); } .text-amber-900 { color: var(--color-amber-900); } .text-background { color: var(--background); } .text-card-foreground { color: var(--card-foreground); } .text-current { color: currentColor; } .text-destructive { color: var(--destructive); } .text-destructive-foreground { color: var(--destructive-foreground); } .text-foreground { color: var(--foreground); } .text-muted-foreground { color: var(--muted-foreground); } .text-popover-foreground { color: var(--popover-foreground); } .text-primary { color: var(--primary); } .text-primary-foreground { color: var(--primary-foreground); } .text-red-500 { color: var(--color-red-500); } .text-rose-100 { color: var(--color-rose-100); } .text-rose-200 { color: var(--color-rose-200); } .text-rose-300 { color: var(--color-rose-300); } .text-rose-800 { color: var(--color-rose-800); } .text-secondary-foreground { color: var(--secondary-foreground); } .text-sky-300 { color: var(--color-sky-300); } .text-slate-200 { color: var(--color-slate-200); } .text-slate-300 { color: var(--color-slate-300); } .text-slate-400 { color: var(--color-slate-400); } .text-slate-500 { color: var(--color-slate-500); } .text-slate-600 { color: var(--color-slate-600); } .text-slate-700 { color: var(--color-slate-700); } .text-slate-900 { color: var(--color-slate-900); } .text-violet-300 { color: var(--color-violet-300); } .text-white { color: var(--color-white); } .lowercase { text-transform: lowercase; } .normal-case { text-transform: none; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .underline { text-decoration-line: underline; } .underline-offset-4 { text-underline-offset: 4px; } .accent-\[\#286dff\] { accent-color: #286dff; } .accent-\[\#b8ff43\] { accent-color: #b8ff43; } .opacity-0 { opacity: 0; } .opacity-20 { opacity: .2; } .opacity-50 { opacity: .5; } .opacity-55 { opacity: .55; } .opacity-70 { opacity: .7; } .opacity-90 { opacity: .9; } .opacity-100 { opacity: 1; } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] { --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border))); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_8px_20px_rgba\(184\,255\,67\,\.28\)\] { --tw-shadow: 0 8px 20px var(--tw-shadow-color, #b8ff4347); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_18px_50px_rgba\(0\,0\,0\,\.2\)\] { --tw-shadow: 0 18px 50px var(--tw-shadow-color, #0003); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0px_4px_11px_0px_rgba\(0\,0\,0\,0\.08\)\] { --tw-shadow: 0px 4px 11px 0px var(--tw-shadow-color, #00000014); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-none { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-xs { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-0 { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-1 { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-ring\/50 { --tw-ring-color: var(--ring); } @supports (color: color-mix(in lab, red, red)) { .ring-ring\/50 { --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } } .ring-slate-200 { --tw-ring-color: var(--color-slate-200); } .ring-offset-background { --tw-ring-offset-color: var(--background); } .outline-hidden { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .outline-hidden { outline-offset: 2px; outline: 2px solid #0000; } } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .filter { filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .backdrop-blur { --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-blur-2xl { --tw-backdrop-blur: blur(var(--blur-2xl)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-blur-sm { --tw-backdrop-blur: blur(var(--blur-sm)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[color\,box-shadow\] { transition-property: color, box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[height\] { transition-property: height; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[left\,right\,width\] { transition-property: left, right, width; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[margin\,opacity\] { transition-property: margin, opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[width\,height\,padding\] { transition-property: width, height, padding; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[width\] { transition-property: width; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-shadow { transition-property: box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-none { transition-property: none; } .duration-100 { --tw-duration: .1s; transition-duration: .1s; } .duration-200 { --tw-duration: .2s; transition-duration: .2s; } .duration-300 { --tw-duration: .3s; transition-duration: .3s; } .duration-1000 { --tw-duration: 1s; transition-duration: 1s; } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .ease-linear { --tw-ease: linear; transition-timing-function: linear; } .fade-in-0 { --tw-enter-opacity: 0; } .outline-none { --tw-outline-style: none; outline-style: none; } .select-none { -webkit-user-select: none; user-select: none; } .zoom-in-95 { --tw-enter-scale: .95; } .\[--cell-size\:--spacing\(8\)\] { --cell-size: calc(var(--spacing) * 8); } .paused { animation-play-state: paused; } .group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) { opacity: 1; } @media (hover: hover) { .group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *) { opacity: 1; } } .group-has-data-\[sidebar\=menu-action\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar="menu-action"]) *) { padding-right: calc(var(--spacing) * 8); } .group-has-\[\[data-orientation\=horizontal\]\]\/field\:text-balance:is(:where(.group\/field):has([data-orientation="horizontal"]) *) { text-wrap: balance; } .group-has-\[\[data-slot\=item-description\]\]\/item\:translate-y-0\.5:is(:where(.group\/item):has([data-slot="item-description"]) *) { --tw-translate-y: calc(var(--spacing) * .5); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-has-\[\[data-slot\=item-description\]\]\/item\:self-start:is(:where(.group\/item):has([data-slot="item-description"]) *) { align-self: flex-start; } .group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.group\/input-group):has( > input) *) { padding-top: calc(var(--spacing) * 2.5); } .group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.group\/input-group):has( > input) *) { padding-bottom: calc(var(--spacing) * 2.5); } .group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.group)[data-collapsible="icon"] *) { margin-top: calc(var(--spacing) * -8); } .group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible="icon"] *) { display: none; } .group-data-\[collapsible\=icon\]\:size-8\!:is(:where(.group)[data-collapsible="icon"] *) { width: calc(var(--spacing) * 8) !important; height: calc(var(--spacing) * 8) !important; } .group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.group)[data-collapsible="icon"] *) { width: var(--sidebar-width-icon); } .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\]:is(:where(.group)[data-collapsible="icon"] *) { width: calc(var(--sidebar-width-icon) + (calc(var(--spacing) * 4))); } .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\]:is(:where(.group)[data-collapsible="icon"] *) { width: calc(var(--sidebar-width-icon) + (calc(var(--spacing) * 4)) + 2px); } .group-data-\[collapsible\=icon\]\:justify-center:is(:where(.group)[data-collapsible="icon"] *) { justify-content: center; } .group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible="icon"] *) { overflow: hidden; } .group-data-\[collapsible\=icon\]\:p-0\!:is(:where(.group)[data-collapsible="icon"] *) { padding: calc(var(--spacing) * 0) !important; } .group-data-\[collapsible\=icon\]\:p-2\!:is(:where(.group)[data-collapsible="icon"] *) { padding: calc(var(--spacing) * 2) !important; } .group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible="icon"] *) { opacity: 0; } .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) { right: calc(var(--sidebar-width) * -1); } .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) { left: calc(var(--sidebar-width) * -1); } .group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.group)[data-collapsible="offcanvas"] *) { width: calc(var(--spacing) * 0); } .group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible="offcanvas"] *) { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) { pointer-events: none; } .group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled="true"] *), .group-data-\[disabled\=true\]\/field\:opacity-50:is(:where(.group\/field)[data-disabled="true"] *), .group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.group\/input-group)[data-disabled="true"] *) { opacity: .5; } .group-data-\[focused\=true\]\/day\:relative:is(:where(.group\/day)[data-focused="true"] *) { position: relative; } .group-data-\[focused\=true\]\/day\:z-10:is(:where(.group\/day)[data-focused="true"] *) { z-index: 10; } .group-data-\[focused\=true\]\/day\:border-ring:is(:where(.group\/day)[data-focused="true"] *) { border-color: var(--ring); } .group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.group\/day)[data-focused="true"] *) { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused="true"] *) { --tw-ring-color: var(--ring); } @supports (color: color-mix(in lab, red, red)) { .group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused="true"] *) { --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } } .group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side="left"] *) { right: calc(var(--spacing) * -4); } .group-data-\[side\=left\]\:border-r:is(:where(.group)[data-side="left"] *) { border-right-style: var(--tw-border-style); border-right-width: 1px; } .group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side="right"] *) { left: calc(var(--spacing) * 0); } .group-data-\[side\=right\]\:rotate-180:is(:where(.group)[data-side="right"] *) { rotate: 180deg; } .group-data-\[side\=right\]\:border-l:is(:where(.group)[data-side="right"] *) { border-left-style: var(--tw-border-style); border-left-width: 1px; } .group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state="open"] *) { rotate: 180deg; } .group-data-\[variant\=floating\]\:rounded-lg:is(:where(.group)[data-variant="floating"] *) { border-radius: var(--radius); } .group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant="floating"] *) { border-style: var(--tw-border-style); border-width: 1px; } .group-data-\[variant\=floating\]\:shadow-sm:is(:where(.group)[data-variant="floating"] *) { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .group-data-\[variant\=outline\]\/field-group\:-mb-2:is(:where(.group\/field-group)[data-variant="outline"] *) { margin-bottom: calc(var(--spacing) * -2); } .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(:where(.group\/drawer-content)[data-vaul-drawer-direction="bottom"] *) { display: block; } .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center:is(:where(.group\/drawer-content)[data-vaul-drawer-direction="bottom"] *), .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center:is(:where(.group\/drawer-content)[data-vaul-drawer-direction="top"] *) { text-align: center; } .group-data-\[viewport\=false\]\/navigation-menu\:top-full:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { top: 100%; } .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { margin-top: calc(var(--spacing) * 1.5); } .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { overflow: hidden; } .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { border-radius: calc(var(--radius) - 2px); } .group-data-\[viewport\=false\]\/navigation-menu\:border:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { border-style: var(--tw-border-style); border-width: 1px; } .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { background-color: var(--popover); } .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { color: var(--popover-foreground); } .group-data-\[viewport\=false\]\/navigation-menu\:shadow:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .group-data-\[viewport\=false\]\/navigation-menu\:duration-200:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { --tw-duration: .2s; transition-duration: .2s; } .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) { cursor: not-allowed; } .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) { opacity: .5; } .peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.peer\/menu-button)[data-size="default"] ~ *) { top: calc(var(--spacing) * 1.5); } .peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.peer\/menu-button)[data-size="lg"] ~ *) { top: calc(var(--spacing) * 2.5); } .peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) { top: calc(var(--spacing) * 1); } .selection\:bg-primary ::selection { background-color: var(--primary); } .selection\:bg-primary::selection { background-color: var(--primary); } .selection\:text-primary-foreground ::selection { color: var(--primary-foreground); } .selection\:text-primary-foreground::selection { color: var(--primary-foreground); } .file\:inline-flex::file-selector-button { display: inline-flex; } .file\:h-7::file-selector-button { height: calc(var(--spacing) * 7); } .file\:border-0::file-selector-button { border-style: var(--tw-border-style); border-width: 0; } .file\:bg-transparent::file-selector-button { background-color: #0000; } .file\:text-sm::file-selector-button { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .file\:font-medium::file-selector-button { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .file\:text-foreground::file-selector-button { color: var(--foreground); } .placeholder\:text-\[\#6f7a8e\]::placeholder { color: #6f7a8e; } .placeholder\:text-\[\#69758b\]::placeholder { color: #69758b; } .placeholder\:text-muted-foreground::placeholder { color: var(--muted-foreground); } .after\:absolute:after { content: var(--tw-content); position: absolute; } .after\:-inset-2:after { content: var(--tw-content); inset: calc(var(--spacing) * -2); } .after\:inset-y-0:after { content: var(--tw-content); inset-block: calc(var(--spacing) * 0); } .after\:left-1\/2:after { content: var(--tw-content); left: 50%; } .after\:w-1:after { content: var(--tw-content); width: calc(var(--spacing) * 1); } .after\:w-\[2px\]:after { content: var(--tw-content); width: 2px; } .after\:-translate-x-1\/2:after { content: var(--tw-content); --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible="offcanvas"] *):after { content: var(--tw-content); left: 100%; } .first\:rounded-l-md:first-child { border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .first\:border-l:first-child { border-left-style: var(--tw-border-style); border-left-width: 1px; } .last\:mt-0:last-child { margin-top: calc(var(--spacing) * 0); } .last\:rounded-r-md:last-child { border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .last\:border-b-0:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } .focus-within\:border-\[\#b8ff43\]:focus-within { border-color: #b8ff43; } .focus-within\:border-\[\#ff8d8d\]:focus-within { border-color: #ff8d8d; } @media (hover: hover) { .hover\:border-\[\#286dff\]:hover { border-color: #286dff; } .hover\:border-\[\#b8ff43\]:hover { border-color: #b8ff43; } .hover\:bg-\[\#1a1a19\]\/90:hover { background-color: oklab(21.7386% -.000547238 .00184049 / .9); } .hover\:bg-\[\#286dff\]:hover { background-color: #286dff; } .hover\:bg-\[\#10121a\]:hover { background-color: #10121a; } .hover\:bg-\[\#b8ff43\]:hover { background-color: #b8ff43; } .hover\:bg-accent:hover, .hover\:bg-accent\/50:hover { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-accent\/50:hover { background-color: color-mix(in oklab, var(--accent) 50%, transparent); } } .hover\:bg-blue-700:hover { background-color: var(--color-blue-700); } .hover\:bg-destructive\/90:hover { background-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-destructive\/90:hover { background-color: color-mix(in oklab, var(--destructive) 90%, transparent); } } .hover\:bg-muted:hover, .hover\:bg-muted\/50:hover { background-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-muted\/50:hover { background-color: color-mix(in oklab, var(--muted) 50%, transparent); } } .hover\:bg-primary\/20:hover { background-color: var(--primary); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-primary\/20:hover { background-color: color-mix(in oklab, var(--primary) 20%, transparent); } } .hover\:bg-primary\/90:hover { background-color: var(--primary); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-primary\/90:hover { background-color: color-mix(in oklab, var(--primary) 90%, transparent); } } .hover\:bg-rose-400:hover { background-color: var(--color-rose-400); } .hover\:bg-secondary\/80:hover { background-color: var(--secondary); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-secondary\/80:hover { background-color: color-mix(in oklab, var(--secondary) 80%, transparent); } } .hover\:bg-slate-100:hover { background-color: var(--color-slate-100); } .hover\:bg-white:hover { background-color: var(--color-white); } .hover\:text-\[\#10121a\]:hover { color: #10121a; } .hover\:text-\[\#b8ff43\]:hover { color: #b8ff43; } .hover\:text-accent-foreground:hover { color: var(--accent-foreground); } .hover\:text-foreground:hover { color: var(--foreground); } .hover\:text-muted-foreground:hover { color: var(--muted-foreground); } .hover\:text-white:hover { color: var(--color-white); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:opacity-90:hover { opacity: .9; } .hover\:opacity-100:hover { opacity: 1; } .hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover { --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-accent))); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:shadow-lg:hover { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:shadow-xl:hover { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:ring-4:hover { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus\:z-10:focus { z-index: 10; } .focus\:border-\[\#286dff\]:focus { border-color: #286dff; } .focus\:border-\[\#b8ff43\]:focus { border-color: #b8ff43; } .focus\:bg-accent:focus { background-color: var(--accent); } .focus\:text-accent-foreground:focus { color: var(--accent-foreground); } .focus\:text-destructive:focus { color: var(--destructive); } .focus\:ring-2:focus { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus\:ring-\[\#286dff\]\/15:focus { --tw-ring-color: oklab(58.2442% -.0294266 -.226175 / .15); } .focus\:ring-ring:focus { --tw-ring-color: var(--ring); } .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .focus\:outline-hidden:focus { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .focus\:outline-hidden:focus { outline-offset: 2px; outline: 2px solid #0000; } } .focus\:outline-none:focus { --tw-outline-style: none; outline-style: none; } .focus-visible\:z-10:focus-visible { z-index: 10; } .focus-visible\:border-ring:focus-visible { border-color: var(--ring); } .focus-visible\:ring-0:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus-visible\:ring-1:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus-visible\:ring-2:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus-visible\:ring-4:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus-visible\:ring-\[3px\]:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus-visible\:ring-destructive\/20:focus-visible { --tw-ring-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .focus-visible\:ring-destructive\/20:focus-visible { --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } .focus-visible\:ring-ring:focus-visible, .focus-visible\:ring-ring\/50:focus-visible { --tw-ring-color: var(--ring); } @supports (color: color-mix(in lab, red, red)) { .focus-visible\:ring-ring\/50:focus-visible { --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } } .focus-visible\:ring-offset-1:focus-visible { --tw-ring-offset-width: 1px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .focus-visible\:outline-hidden:focus-visible { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .focus-visible\:outline-hidden:focus-visible { outline-offset: 2px; outline: 2px solid #0000; } } .focus-visible\:outline-1:focus-visible { outline-style: var(--tw-outline-style); outline-width: 1px; } .focus-visible\:outline-ring:focus-visible { outline-color: var(--ring); } .disabled\:pointer-events-none:disabled { pointer-events: none; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:bg-slate-100:disabled { background-color: var(--color-slate-100); } .disabled\:bg-slate-200:disabled { background-color: var(--color-slate-200); } .disabled\:opacity-40:disabled { opacity: .4; } .disabled\:opacity-50:disabled { opacity: .5; } .disabled\:opacity-60:disabled { opacity: .6; } :where([data-side="left"]) .in-data-\[side\=left\]\:cursor-w-resize { cursor: w-resize; } :where([data-side="right"]) .in-data-\[side\=right\]\:cursor-e-resize { cursor: e-resize; } .has-focus\:border-ring:has(:focus) { border-color: var(--ring); } .has-focus\:ring-\[3px\]:has(:focus) { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .has-focus\:ring-ring\/50:has(:focus) { --tw-ring-color: var(--ring); } @supports (color: color-mix(in lab, red, red)) { .has-focus\:ring-ring\/50:has(:focus) { --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } } .has-disabled\:opacity-50:has(:disabled) { opacity: .5; } .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot="card-action"]) { grid-template-columns: 1fr auto; } .has-data-\[state\=checked\]\:border-primary:has([data-state="checked"]) { border-color: var(--primary); } .has-data-\[state\=checked\]\:bg-primary\/5:has([data-state="checked"]) { background-color: var(--primary); } @supports (color: color-mix(in lab, red, red)) { .has-data-\[state\=checked\]\:bg-primary\/5:has([data-state="checked"]) { background-color: color-mix(in oklab, var(--primary) 5%, transparent); } } .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:border-ring:has([data-slot="input-group-control"]:focus-visible) { border-color: var(--ring); } .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-\[3px\]:has([data-slot="input-group-control"]:focus-visible) { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot="input-group-control"]:focus-visible) { --tw-ring-color: var(--ring); } @supports (color: color-mix(in lab, red, red)) { .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot="input-group-control"]:focus-visible) { --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } } .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive:has([data-slot][aria-invalid="true"]) { border-color: var(--destructive); } .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid="true"]) { --tw-ring-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid="true"]) { --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } .has-\[\>\[data-align\=block-end\]\]\:h-auto:has( > [data-align="block-end"]) { height: auto; } .has-\[\>\[data-align\=block-end\]\]\:flex-col:has( > [data-align="block-end"]) { flex-direction: column; } .has-\[\>\[data-align\=block-start\]\]\:h-auto:has( > [data-align="block-start"]) { height: auto; } .has-\[\>\[data-align\=block-start\]\]\:flex-col:has( > [data-align="block-start"]) { flex-direction: column; } .has-\[\>\[data-slot\=button-group\]\]\:gap-2:has( > [data-slot="button-group"]) { gap: calc(var(--spacing) * 2); } .has-\[\>\[data-slot\=checkbox-group\]\]\:gap-3:has( > [data-slot="checkbox-group"]) { gap: calc(var(--spacing) * 3); } .has-\[\>\[data-slot\=field-content\]\]\:items-start:has( > [data-slot="field-content"]) { align-items: flex-start; } .has-\[\>\[data-slot\=field\]\]\:w-full:has( > [data-slot="field"]) { width: 100%; } .has-\[\>\[data-slot\=field\]\]\:flex-col:has( > [data-slot="field"]) { flex-direction: column; } .has-\[\>\[data-slot\=field\]\]\:rounded-md:has( > [data-slot="field"]) { border-radius: calc(var(--radius) - 2px); } .has-\[\>\[data-slot\=field\]\]\:border:has( > [data-slot="field"]) { border-style: var(--tw-border-style); border-width: 1px; } .has-\[\>\[data-slot\=radio-group\]\]\:gap-3:has( > [data-slot="radio-group"]) { gap: calc(var(--spacing) * 3); } .has-\[\>button\]\:mr-\[-0\.45rem\]:has( > button) { margin-right: -.45rem; } .has-\[\>button\]\:ml-\[-0\.45rem\]:has( > button) { margin-left: -.45rem; } .has-\[\>kbd\]\:mr-\[-0\.35rem\]:has( > kbd) { margin-right: -.35rem; } .has-\[\>kbd\]\:ml-\[-0\.35rem\]:has( > kbd) { margin-left: -.35rem; } .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has( > svg) { grid-template-columns: calc(var(--spacing) * 4) 1fr; } .has-\[\>svg\]\:gap-x-3:has( > svg) { column-gap: calc(var(--spacing) * 3); } .has-\[\>svg\]\:p-0:has( > svg) { padding: calc(var(--spacing) * 0); } .has-\[\>svg\]\:px-2:has( > svg) { padding-inline: calc(var(--spacing) * 2); } .has-\[\>svg\]\:px-2\.5:has( > svg) { padding-inline: calc(var(--spacing) * 2.5); } .has-\[\>svg\]\:px-3:has( > svg) { padding-inline: calc(var(--spacing) * 3); } .has-\[\>svg\]\:px-4:has( > svg) { padding-inline: calc(var(--spacing) * 4); } .has-\[\>textarea\]\:h-auto:has( > textarea) { height: auto; } .aria-disabled\:pointer-events-none[aria-disabled="true"] { pointer-events: none; } .aria-disabled\:opacity-50[aria-disabled="true"] { opacity: .5; } .aria-invalid\:border-destructive[aria-invalid="true"] { border-color: var(--destructive); } .aria-invalid\:ring-destructive\/20[aria-invalid="true"] { --tw-ring-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .aria-invalid\:ring-destructive\/20[aria-invalid="true"] { --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } .aria-selected\:text-muted-foreground[aria-selected="true"] { color: var(--muted-foreground); } .data-\[active\=true\]\:z-10[data-active="true"] { z-index: 10; } .data-\[active\=true\]\:border-ring[data-active="true"] { border-color: var(--ring); } .data-\[active\=true\]\:bg-accent\/50[data-active="true"] { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .data-\[active\=true\]\:bg-accent\/50[data-active="true"] { background-color: color-mix(in oklab, var(--accent) 50%, transparent); } } .data-\[active\=true\]\:font-medium[data-active="true"] { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .data-\[active\=true\]\:text-accent-foreground[data-active="true"] { color: var(--accent-foreground); } .data-\[active\=true\]\:ring-\[3px\][data-active="true"] { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .data-\[active\=true\]\:ring-ring\/50[data-active="true"] { --tw-ring-color: var(--ring); } @supports (color: color-mix(in lab, red, red)) { .data-\[active\=true\]\:ring-ring\/50[data-active="true"] { --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } } @media (hover: hover) { .data-\[active\=true\]\:hover\:bg-accent[data-active="true"]:hover { background-color: var(--accent); } } .data-\[active\=true\]\:focus\:bg-accent[data-active="true"]:focus { background-color: var(--accent); } .data-\[active\=true\]\:aria-invalid\:border-destructive[data-active="true"][aria-invalid="true"] { border-color: var(--destructive); } .data-\[active\=true\]\:aria-invalid\:ring-destructive\/20[data-active="true"][aria-invalid="true"] { --tw-ring-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .data-\[active\=true\]\:aria-invalid\:ring-destructive\/20[data-active="true"][aria-invalid="true"] { --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } .data-\[disabled\]\:pointer-events-none[data-disabled] { pointer-events: none; } .data-\[disabled\]\:opacity-50[data-disabled] { opacity: .5; } .data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] { pointer-events: none; } .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] { opacity: .5; } .data-\[error\=true\]\:text-destructive[data-error="true"] { color: var(--destructive); } .data-\[inset\]\:pl-8[data-inset] { padding-left: calc(var(--spacing) * 8); } .data-\[invalid\=true\]\:text-destructive[data-invalid="true"] { color: var(--destructive); } .data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] { --tw-enter-translate-x: calc(52 * var(--spacing)); } .data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] { --tw-enter-translate-x: calc(52 * var(--spacing) * -1); } .data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] { --tw-exit-translate-x: calc(52 * var(--spacing)); } .data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] { --tw-exit-translate-x: calc(52 * var(--spacing) * -1); } .data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); } .data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] { --tw-enter-opacity: 0; } .data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); } .data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] { --tw-exit-opacity: 0; } .data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] { height: calc(var(--spacing) * 1.5); } .data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] { height: 100%; } .data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] { height: 1px; } .data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] { width: 100%; } .data-\[orientation\=vertical\]\:h-auto[data-orientation="vertical"] { height: auto; } .data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] { height: 100%; } .data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] { min-height: calc(var(--spacing) * 44); } .data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] { width: calc(var(--spacing) * 1.5); } .data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] { width: auto; } .data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] { width: 100%; } .data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] { width: 1px; } .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] { flex-direction: column; } .data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] { height: 1px; } .data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] { width: 100%; } .data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] { flex-direction: column; } .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]:after { content: var(--tw-content); left: calc(var(--spacing) * 0); } .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]:after { content: var(--tw-content); height: calc(var(--spacing) * 1); } .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]:after { content: var(--tw-content); width: 100%; } .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]:after { content: var(--tw-content); --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } .data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]:after { content: var(--tw-content); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .data-\[placeholder\]\:text-muted-foreground[data-placeholder] { color: var(--muted-foreground); } .data-\[range-end\=true\]\:rounded-md[data-range-end="true"] { border-radius: calc(var(--radius) - 2px); } .data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] { border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .data-\[range-end\=true\]\:bg-primary[data-range-end="true"] { background-color: var(--primary); } .data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] { color: var(--primary-foreground); } .data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] { border-radius: 0; } .data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] { background-color: var(--accent); } .data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] { color: var(--accent-foreground); } .data-\[range-start\=true\]\:rounded-md[data-range-start="true"] { border-radius: calc(var(--radius) - 2px); } .data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] { border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .data-\[range-start\=true\]\:bg-primary[data-range-start="true"] { background-color: var(--primary); } .data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] { color: var(--primary-foreground); } .data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] { background-color: var(--primary); } .data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] { color: var(--primary-foreground); } .data-\[selected\=true\]\:rounded-none[data-selected="true"] { border-radius: 0; } .data-\[selected\=true\]\:bg-accent[data-selected="true"] { background-color: var(--accent); } .data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] { color: var(--accent-foreground); } .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] { --tw-translate-y: calc(var(--spacing) * 1); translate: var(--tw-translate-x) var(--tw-translate-y); } .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] { --tw-enter-translate-y: calc(2 * var(--spacing) * -1); } .data-\[side\=left\]\:-translate-x-1[data-side="left"] { --tw-translate-x: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] { --tw-enter-translate-x: calc(2 * var(--spacing)); } .data-\[side\=right\]\:translate-x-1[data-side="right"] { --tw-translate-x: calc(var(--spacing) * 1); translate: var(--tw-translate-x) var(--tw-translate-y); } .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] { --tw-enter-translate-x: calc(2 * var(--spacing) * -1); } .data-\[side\=top\]\:-translate-y-1[data-side="top"] { --tw-translate-y: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] { --tw-enter-translate-y: calc(2 * var(--spacing)); } .data-\[size\=default\]\:h-9[data-size="default"] { height: calc(var(--spacing) * 9); } .data-\[size\=sm\]\:h-8[data-size="sm"] { height: calc(var(--spacing) * 8); } :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] { color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] { color: color-mix(in oklab, var(--destructive) 90%, transparent); } } .data-\[slot\=checkbox-group\]\:gap-3[data-slot="checkbox-group"] { gap: calc(var(--spacing) * 3); } :is(.\*\*\:data-\[slot\=command-input-wrapper\]\:h-12 *)[data-slot="command-input-wrapper"] { height: calc(var(--spacing) * 12); } :is(.\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:ring-0 *)[data-slot="navigation-menu-link"]:focus { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } :is(.\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:outline-none *)[data-slot="navigation-menu-link"]:focus { --tw-outline-style: none; outline-style: none; } :is(.\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] { -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } :is(.\*\:data-\[slot\=select-value\]\:flex > *)[data-slot="select-value"] { display: flex; } :is(.\*\:data-\[slot\=select-value\]\:items-center > *)[data-slot="select-value"] { align-items: center; } :is(.\*\:data-\[slot\=select-value\]\:gap-2 > *)[data-slot="select-value"] { gap: calc(var(--spacing) * 2); } .data-\[state\=active\]\:bg-background[data-state="active"] { background-color: var(--background); } .data-\[state\=active\]\:shadow-sm[data-state="active"] { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] { --tw-translate-x: calc(100% - 2px); translate: var(--tw-translate-x) var(--tw-translate-y); } .data-\[state\=checked\]\:border-primary[data-state="checked"] { border-color: var(--primary); } .data-\[state\=checked\]\:bg-primary[data-state="checked"] { background-color: var(--primary); } .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] { color: var(--primary-foreground); } .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] { animation: accordion-up var(--tw-animation-duration, var(--tw-duration, .2s)) var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); } .data-\[state\=closed\]\:animate-out[data-state="closed"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); } .data-\[state\=closed\]\:duration-300[data-state="closed"] { --tw-duration: .3s; transition-duration: .3s; } .data-\[state\=closed\]\:fade-out-0[data-state="closed"] { --tw-exit-opacity: 0; } .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] { --tw-exit-scale: .95; } .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] { --tw-exit-translate-y: 100%; } .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] { --tw-exit-translate-x: -100%; } .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] { --tw-exit-translate-x: 100%; } .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] { --tw-exit-translate-y: -100%; } .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out:is(:where(.group\/navigation-menu)[data-viewport="false"] *)[data-state="closed"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); } .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0:is(:where(.group\/navigation-menu)[data-viewport="false"] *)[data-state="closed"] { --tw-exit-opacity: 0; } .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95:is(:where(.group\/navigation-menu)[data-viewport="false"] *)[data-state="closed"] { --tw-exit-scale: .95; } .data-\[state\=hidden\]\:animate-out[data-state="hidden"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); } .data-\[state\=hidden\]\:fade-out[data-state="hidden"] { --tw-exit-opacity: 0; } .data-\[state\=on\]\:bg-accent[data-state="on"] { background-color: var(--accent); } .data-\[state\=on\]\:text-accent-foreground[data-state="on"] { color: var(--accent-foreground); } .data-\[state\=open\]\:animate-accordion-down[data-state="open"] { animation: accordion-down var(--tw-animation-duration, var(--tw-duration, .2s)) var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); } .data-\[state\=open\]\:animate-in[data-state="open"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); } .data-\[state\=open\]\:bg-accent[data-state="open"], .data-\[state\=open\]\:bg-accent\/50[data-state="open"] { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .data-\[state\=open\]\:bg-accent\/50[data-state="open"] { background-color: color-mix(in oklab, var(--accent) 50%, transparent); } } .data-\[state\=open\]\:bg-secondary[data-state="open"] { background-color: var(--secondary); } .data-\[state\=open\]\:text-accent-foreground[data-state="open"] { color: var(--accent-foreground); } .data-\[state\=open\]\:text-muted-foreground[data-state="open"] { color: var(--muted-foreground); } .data-\[state\=open\]\:opacity-100[data-state="open"] { opacity: 1; } .data-\[state\=open\]\:duration-500[data-state="open"] { --tw-duration: .5s; transition-duration: .5s; } .data-\[state\=open\]\:fade-in-0[data-state="open"] { --tw-enter-opacity: 0; } .data-\[state\=open\]\:zoom-in-90[data-state="open"] { --tw-enter-scale: .9; } .data-\[state\=open\]\:zoom-in-95[data-state="open"] { --tw-enter-scale: .95; } .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] { --tw-enter-translate-y: 100%; } .data-\[state\=open\]\:slide-in-from-left[data-state="open"] { --tw-enter-translate-x: -100%; } .data-\[state\=open\]\:slide-in-from-right[data-state="open"] { --tw-enter-translate-x: 100%; } .data-\[state\=open\]\:slide-in-from-top[data-state="open"] { --tw-enter-translate-y: -100%; } .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in:is(:where(.group\/navigation-menu)[data-viewport="false"] *)[data-state="open"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); } .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0:is(:where(.group\/navigation-menu)[data-viewport="false"] *)[data-state="open"] { --tw-enter-opacity: 0; } .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95:is(:where(.group\/navigation-menu)[data-viewport="false"] *)[data-state="open"] { --tw-enter-scale: .95; } @media (hover: hover) { .data-\[state\=open\]\:hover\:bg-accent[data-state="open"]:hover { background-color: var(--accent); } } .data-\[state\=open\]\:focus\:bg-accent[data-state="open"]:focus { background-color: var(--accent); } .data-\[state\=selected\]\:bg-muted[data-state="selected"] { background-color: var(--muted); } .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] { background-color: var(--input); } .data-\[state\=visible\]\:animate-in[data-state="visible"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); } .data-\[state\=visible\]\:fade-in[data-state="visible"] { --tw-enter-opacity: 0; } .data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] { color: var(--destructive); } .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus { background-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); } } .data-\[variant\=destructive\]\:focus\:text-destructive[data-variant="destructive"]:focus { color: var(--destructive); } .data-\[variant\=label\]\:text-sm[data-variant="label"] { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .data-\[variant\=legend\]\:text-base[data-variant="legend"] { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .data-\[variant\=outline\]\:border-l-0[data-variant="outline"] { border-left-style: var(--tw-border-style); border-left-width: 0; } .data-\[variant\=outline\]\:shadow-xs[data-variant="outline"] { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .data-\[variant\=outline\]\:first\:border-l[data-variant="outline"]:first-child { border-left-style: var(--tw-border-style); border-left-width: 1px; } .data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] { inset-inline: calc(var(--spacing) * 0); } .data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] { bottom: calc(var(--spacing) * 0); } .data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] { margin-top: calc(var(--spacing) * 24); } .data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] { max-height: 80vh; } .data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] { border-top-style: var(--tw-border-style); border-top-width: 1px; } .data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] { inset-block: calc(var(--spacing) * 0); } .data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] { left: calc(var(--spacing) * 0); } .data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] { width: 75%; } .data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] { border-right-style: var(--tw-border-style); border-right-width: 1px; } .data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] { inset-block: calc(var(--spacing) * 0); } .data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] { right: calc(var(--spacing) * 0); } .data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] { width: 75%; } .data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] { border-left-style: var(--tw-border-style); border-left-width: 1px; } .data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] { inset-inline: calc(var(--spacing) * 0); } .data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] { top: calc(var(--spacing) * 0); } .data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] { margin-bottom: calc(var(--spacing) * 24); } .data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] { max-height: 80vh; } .data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] { border-bottom-right-radius: var(--radius); border-bottom-left-radius: var(--radius); } .data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .nth-last-2\:-mt-1:nth-last-child(2) { margin-top: calc(var(--spacing) * -1); } @supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) { .supports-\[backdrop-filter\]\:backdrop-blur { --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } } @media (min-width: 40rem) { .sm\:col-span-2 { grid-column: span 2 / span 2; } .sm\:mx-8 { margin-inline: calc(var(--spacing) * 8); } .sm\:block { display: block; } .sm\:flex { display: flex; } .sm\:max-w-lg { max-width: var(--container-lg); } .sm\:max-w-sm { max-width: var(--container-sm); } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:grid-cols-\[1fr_1fr_auto\] { grid-template-columns: 1fr 1fr auto; } .sm\:grid-cols-\[1fr_190px\] { grid-template-columns: 1fr 190px; } .sm\:flex-row { flex-direction: row; } .sm\:items-center { align-items: center; } .sm\:items-end { align-items: flex-end; } .sm\:justify-between { justify-content: space-between; } .sm\:justify-end { justify-content: flex-end; } .sm\:gap-2\.5 { gap: calc(var(--spacing) * 2.5); } .sm\:self-auto { align-self: auto; } .sm\:p-6 { padding: calc(var(--spacing) * 6); } .sm\:pr-2\.5 { padding-right: calc(var(--spacing) * 2.5); } .sm\:pl-2\.5 { padding-left: calc(var(--spacing) * 2.5); } .sm\:text-left { text-align: left; } .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"], .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] { max-width: var(--container-sm); } } @media (min-width: 48rem) { .md\:absolute { position: absolute; } .md\:block { display: block; } .md\:flex { display: flex; } .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] { width: var(--radix-navigation-menu-viewport-width); } .md\:w-auto { width: auto; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-\[240px_1fr\] { grid-template-columns: 240px 1fr; } .md\:flex-row { flex-direction: row; } .md\:items-end { align-items: flex-end; } .md\:justify-between { justify-content: space-between; } .md\:gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .md\:p-6 { padding: calc(var(--spacing) * 6); } .md\:p-8 { padding: calc(var(--spacing) * 8); } .md\:p-12 { padding: calc(var(--spacing) * 12); } .md\:text-left { text-align: left; } .md\:text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .md\:opacity-0 { opacity: 0; } .md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.peer)[data-variant="inset"] ~ *) { margin: calc(var(--spacing) * 2); } .md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant="inset"] ~ *) { margin-left: calc(var(--spacing) * 0); } .md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.peer)[data-variant="inset"] ~ *) { border-radius: calc(var(--radius) + 4px); } .md\:peer-data-\[variant\=inset\]\:shadow-sm:is(:where(.peer)[data-variant="inset"] ~ *) { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2:is(:where(.peer)[data-variant="inset"] ~ *):is(:where(.peer)[data-state="collapsed"] ~ *) { margin-left: calc(var(--spacing) * 2); } .md\:after\:hidden:after { content: var(--tw-content); display: none; } } @media (min-width: 64rem) { .lg\:col-span-4 { grid-column: span 4 / span 4; } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-\[\.9fr_1\.1fr\] { grid-template-columns: .9fr 1.1fr; } .lg\:grid-cols-\[1\.3fr_\.85fr_1fr_auto\] { grid-template-columns: 1.3fr .85fr 1fr auto; } .lg\:grid-cols-\[1\.05fr_\.95fr\] { grid-template-columns: 1.05fr .95fr; } .lg\:grid-cols-\[1fr_\.8fr\] { grid-template-columns: 1fr .8fr; } .lg\:flex-row { flex-direction: row; } .lg\:items-end { align-items: flex-end; } .lg\:justify-between { justify-content: space-between; } .lg\:border-t-0 { border-top-style: var(--tw-border-style); border-top-width: 0; } .lg\:border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .lg\:border-b-0 { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } .lg\:border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } } @media (min-width: 80rem) { .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xl\:grid-cols-\[1\.2fr_\.8fr\] { grid-template-columns: 1.2fr .8fr; } .xl\:grid-cols-\[220px_1fr\] { grid-template-columns: 220px 1fr; } .xl\:border-t-0 { border-top-style: var(--tw-border-style); border-top-width: 0; } .xl\:border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .xl\:border-b-0 { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } .xl\:border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } } @media (min-width: 96rem) { .\32 xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container field-group (min-width: 28rem) { .\@md\/field-group\:flex-row { flex-direction: row; } .\@md\/field-group\:items-center { align-items: center; } .\@md\/field-group\:has-\[\>\[data-slot\=field-content\]\]\:items-start:has( > [data-slot="field-content"]) { align-items: flex-start; } } .dark\:border-input:is(.dark *) { border-color: var(--input); } .dark\:bg-destructive\/60:is(.dark *) { background-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .dark\:bg-destructive\/60:is(.dark *) { background-color: color-mix(in oklab, var(--destructive) 60%, transparent); } } .dark\:bg-input\/30:is(.dark *) { background-color: var(--input); } @supports (color: color-mix(in lab, red, red)) { .dark\:bg-input\/30:is(.dark *) { background-color: color-mix(in oklab, var(--input) 30%, transparent); } } .dark\:bg-transparent:is(.dark *) { background-color: #0000; } .dark\:text-muted-foreground:is(.dark *) { color: var(--muted-foreground); } @media (hover: hover) { .dark\:hover\:bg-accent\/50:is(.dark *):hover { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .dark\:hover\:bg-accent\/50:is(.dark *):hover { background-color: color-mix(in oklab, var(--accent) 50%, transparent); } } .dark\:hover\:bg-input\/50:is(.dark *):hover { background-color: var(--input); } @supports (color: color-mix(in lab, red, red)) { .dark\:hover\:bg-input\/50:is(.dark *):hover { background-color: color-mix(in oklab, var(--input) 50%, transparent); } } .dark\:hover\:text-accent-foreground:is(.dark *):hover { color: var(--accent-foreground); } } .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible { --tw-ring-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible { --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); } } .dark\:has-data-\[state\=checked\]\:bg-primary\/10:is(.dark *):has([data-state="checked"]) { background-color: var(--primary); } @supports (color: color-mix(in lab, red, red)) { .dark\:has-data-\[state\=checked\]\:bg-primary\/10:is(.dark *):has([data-state="checked"]) { background-color: color-mix(in oklab, var(--primary) 10%, transparent); } } .dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:is(.dark *):has([data-slot][aria-invalid="true"]) { --tw-ring-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:is(.dark *):has([data-slot][aria-invalid="true"]) { --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); } } .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] { --tw-ring-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] { --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); } } .dark\:data-\[active\=true\]\:aria-invalid\:ring-destructive\/40:is(.dark *)[data-active="true"][aria-invalid="true"] { --tw-ring-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .dark\:data-\[active\=true\]\:aria-invalid\:ring-destructive\/40:is(.dark *)[data-active="true"][aria-invalid="true"] { --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); } } .dark\:data-\[state\=active\]\:border-input:is(.dark *)[data-state="active"] { border-color: var(--input); } .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] { background-color: var(--input); } @supports (color: color-mix(in lab, red, red)) { .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] { background-color: color-mix(in oklab, var(--input) 30%, transparent); } } .dark\:data-\[state\=active\]\:text-foreground:is(.dark *)[data-state="active"] { color: var(--foreground); } .dark\:data-\[state\=checked\]\:bg-primary:is(.dark *)[data-state="checked"] { background-color: var(--primary); } .dark\:data-\[state\=checked\]\:bg-primary-foreground:is(.dark *)[data-state="checked"] { background-color: var(--primary-foreground); } .dark\:data-\[state\=unchecked\]\:bg-foreground:is(.dark *)[data-state="unchecked"] { background-color: var(--foreground); } .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(.dark *)[data-state="unchecked"] { background-color: var(--input); } @supports (color: color-mix(in lab, red, red)) { .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(.dark *)[data-state="unchecked"] { background-color: color-mix(in oklab, var(--input) 80%, transparent); } } .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus { background-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus { background-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text { fill: var(--muted-foreground); } .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] { stroke: var(--border); } @supports (color: color-mix(in lab, red, red)) { .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] { stroke: color-mix(in oklab, var(--border) 50%, transparent); } } .\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor { stroke: var(--border); } .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke="#fff"] { stroke: #0000; } .\[\&_\.recharts-layer\]\:outline-hidden .recharts-layer { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .\[\&_\.recharts-layer\]\:outline-hidden .recharts-layer { outline-offset: 2px; outline: 2px solid #0000; } } .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke="#ccc"] { stroke: var(--border); } .\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector, .\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor { fill: var(--muted); } .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke="#ccc"] { stroke: var(--border); } .\[\&_\.recharts-sector\]\:outline-hidden .recharts-sector { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .\[\&_\.recharts-sector\]\:outline-hidden .recharts-sector { outline-offset: 2px; outline: 2px solid #0000; } } .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke="#fff"] { stroke: #0000; } .\[\&_\.recharts-surface\]\:outline-hidden .recharts-surface { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .\[\&_\.recharts-surface\]\:outline-hidden .recharts-surface { outline-offset: 2px; outline: 2px solid #0000; } } .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] { padding-inline: calc(var(--spacing) * 2); } .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] { padding-block: calc(var(--spacing) * 1.5); } .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] { color: var(--muted-foreground); } .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] { padding-inline: calc(var(--spacing) * 2); } .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~ [cmdk-group] { padding-top: calc(var(--spacing) * 0); } .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg { height: calc(var(--spacing) * 5); } .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg { width: calc(var(--spacing) * 5); } .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] { height: calc(var(--spacing) * 12); } .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] { padding-inline: calc(var(--spacing) * 2); } .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] { padding-block: calc(var(--spacing) * 3); } .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg { height: calc(var(--spacing) * 5); } .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg { width: calc(var(--spacing) * 5); } .\[\&_img\]\:size-full img { width: 100%; height: 100%; } .\[\&_img\]\:object-cover img { object-fit: cover; } .\[\&_p\]\:leading-relaxed p { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .\[\&_svg\]\:pointer-events-none svg { pointer-events: none; } .\[\&_svg\]\:shrink-0 svg { flex-shrink: 0; } .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*="size-"]) { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6 svg:not([class*="size-"]) { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*="text-"]) { color: var(--muted-foreground); } .\[\&_tr\]\:border-b tr { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .\[\&_tr\:last-child\]\:border-0 tr:last-child { border-style: var(--tw-border-style); border-width: 0; } .\[\&\+\[data-slot\=item-content\]\]\:flex-none + [data-slot="item-content"] { flex: none; } .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected="true"] button { border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) { padding-right: calc(var(--spacing) * 0); } .\[\.border-b\]\:pb-3.border-b { padding-bottom: calc(var(--spacing) * 3); } .\[\.border-b\]\:pb-6.border-b { padding-bottom: calc(var(--spacing) * 6); } .\[\.border-t\]\:pt-3.border-t { padding-top: calc(var(--spacing) * 3); } .\[\.border-t\]\:pt-6.border-t { padding-top: calc(var(--spacing) * 6); } :is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_next > svg), :is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_previous > svg) { rotate: 180deg; } .\[a\]\:transition-colors:is(a) { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } @media (hover: hover) { .\[a\]\:hover\:bg-accent\/50:is(a):hover { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .\[a\]\:hover\:bg-accent\/50:is(a):hover { background-color: color-mix(in oklab, var(--accent) 50%, transparent); } } } :is(.\*\:\[span\]\:last\:flex > *):is(span):last-child { display: flex; } :is(.\*\:\[span\]\:last\:items-center > *):is(span):last-child { align-items: center; } :is(.\*\:\[span\]\:last\:gap-2 > *):is(span):last-child { gap: calc(var(--spacing) * 2); } :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive[data-variant="destructive"] > *):is(svg) { color: var(--destructive) !important; } .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected="true"] button { border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .\[\&\>\*\]\:w-full > * { width: 100%; } .\[\&\>\*\]\:focus-visible\:relative > :focus-visible { position: relative; } .\[\&\>\*\]\:focus-visible\:z-10 > :focus-visible { z-index: 10; } .\[\&\>\*\]\:data-\[slot\=field\]\:p-4 > [data-slot="field"] { padding: calc(var(--spacing) * 4); } @container field-group (min-width: 28rem) { .\@md\/field-group\:\[\&\>\*\]\:w-auto > * { width: auto; } } .\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none > :not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; } .\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .\[\&\>\*\:not\(\:first-child\)\]\:border-t-0 > :not(:first-child) { border-top-style: var(--tw-border-style); border-top-width: 0; } .\[\&\>\*\:not\(\:first-child\)\]\:border-l-0 > :not(:first-child) { border-left-style: var(--tw-border-style); border-left-width: 0; } .\[\&\>\*\:not\(\:last-child\)\]\:rounded-r-none > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none > :not(:last-child) { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .\[\&\>\.sr-only\]\:w-auto > .sr-only { width: auto; } .\[\&\>\[data-slot\=field-group\]\]\:gap-4 > [data-slot="field-group"] { gap: calc(var(--spacing) * 4); } .\[\&\>\[data-slot\=field-label\]\]\:flex-auto > [data-slot="field-label"] { flex: auto; } @container field-group (min-width: 28rem) { .\@md\/field-group\:\[\&\>\[data-slot\=field-label\]\]\:flex-auto > [data-slot="field-label"] { flex: auto; } } .has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-md:has(:is(select[aria-hidden="true"]:last-child)) > [data-slot="select-trigger"]:last-of-type { border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit > [data-slot="select-trigger"]:not([class*="w-"]) { width: fit-content; } .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] { --tw-translate-y: 2px; translate: var(--tw-translate-x) var(--tw-translate-y); } .has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has( > [data-slot="field-content"]) > [role="checkbox"], .has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has( > [data-slot="field-content"]) [role="radio"] { margin-top: 1px; } @container field-group (min-width: 28rem) { .\@md\/field-group\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has( > [data-slot="field-content"]) > [role="checkbox"], .\@md\/field-group\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has( > [data-slot="field-content"]) [role="radio"] { margin-top: 1px; } } .\[\&\>a\]\:underline > a { text-decoration-line: underline; } .\[\&\>a\]\:underline-offset-4 > a { text-underline-offset: 4px; } .\[\&\>a\:hover\]\:text-primary > a:hover { color: var(--primary); } .\[\&\>button\]\:hidden > button { display: none; } .\[\&\>input\]\:flex-1 > input { flex: 1; } .has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has( > [data-align="block-end"]) > input { padding-top: calc(var(--spacing) * 3); } .has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has( > [data-align="block-start"]) > input { padding-bottom: calc(var(--spacing) * 3); } .has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-2:has( > [data-align="inline-end"]) > input { padding-right: calc(var(--spacing) * 2); } .has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-2:has( > [data-align="inline-start"]) > input { padding-left: calc(var(--spacing) * 2); } .\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\] > kbd { border-radius: calc(var(--radius) - 5px); } .\[\&\>span\]\:text-xs > span { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .\[\&\>span\]\:opacity-70 > span { opacity: .7; } .\[\&\>span\:last-child\]\:truncate > span:last-child { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .\[\&\>svg\]\:pointer-events-none > svg { pointer-events: none; } .\[\&\>svg\]\:size-3 > svg { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .\[\&\>svg\]\:size-3\.5 > svg { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } .\[\&\>svg\]\:size-4 > svg { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .\[\&\>svg\]\:h-2\.5 > svg { height: calc(var(--spacing) * 2.5); } .\[\&\>svg\]\:h-3 > svg { height: calc(var(--spacing) * 3); } .\[\&\>svg\]\:w-2\.5 > svg { width: calc(var(--spacing) * 2.5); } .\[\&\>svg\]\:w-3 > svg { width: calc(var(--spacing) * 3); } .\[\&\>svg\]\:shrink-0 > svg { flex-shrink: 0; } .\[\&\>svg\]\:translate-y-0\.5 > svg { --tw-translate-y: calc(var(--spacing) * .5); translate: var(--tw-translate-x) var(--tw-translate-y); } .\[\&\>svg\]\:text-current > svg { color: currentColor; } .\[\&\>svg\]\:text-muted-foreground > svg { color: var(--muted-foreground); } .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 > svg:not([class*="size-"]) { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 > svg:not([class*="size-"]) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .\[\&\>tr\]\:last\:border-b-0 > tr:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } .\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction="vertical"] > div { rotate: 90deg; } .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg { rotate: 180deg; } [data-side="left"][data-collapsible="offcanvas"] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 { right: calc(var(--spacing) * -2); } [data-side="left"][data-state="collapsed"] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize { cursor: e-resize; } [data-side="right"][data-collapsible="offcanvas"] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 { left: calc(var(--spacing) * -2); } [data-side="right"][data-state="collapsed"] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize { cursor: w-resize; } [data-slot="card-content"] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent, [data-slot="popover-content"] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent { background-color: #0000; } [data-slot="tooltip-content"] .\[\[data-slot\=tooltip-content\]_\&\]\:bg-background\/20 { background-color: var(--background); } @supports (color: color-mix(in lab, red, red)) { [data-slot="tooltip-content"] .\[\[data-slot\=tooltip-content\]_\&\]\:bg-background\/20 { background-color: color-mix(in oklab, var(--background) 20%, transparent); } } [data-slot="tooltip-content"] .\[\[data-slot\=tooltip-content\]_\&\]\:text-background { color: var(--background); } [data-slot="tooltip-content"] .dark\:\[\[data-slot\=tooltip-content\]_\&\]\:bg-background\/10:is(.dark *) { background-color: var(--background); } @supports (color: color-mix(in lab, red, red)) { [data-slot="tooltip-content"] .dark\:\[\[data-slot\=tooltip-content\]_\&\]\:bg-background\/10:is(.dark *) { background-color: color-mix(in oklab, var(--background) 10%, transparent); } } [data-variant="legend"] + .\[\[data-variant\=legend\]\+\&\]\:-mt-1\.5 { margin-top: calc(var(--spacing) * -1.5); } @media (hover: hover) { a.\[a\&\]\:hover\:bg-accent:hover { background-color: var(--accent); } a.\[a\&\]\:hover\:bg-destructive\/90:hover { background-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { a.\[a\&\]\:hover\:bg-destructive\/90:hover { background-color: color-mix(in oklab, var(--destructive) 90%, transparent); } } a.\[a\&\]\:hover\:bg-primary\/90:hover { background-color: var(--primary); } @supports (color: color-mix(in lab, red, red)) { a.\[a\&\]\:hover\:bg-primary\/90:hover { background-color: color-mix(in oklab, var(--primary) 90%, transparent); } } a.\[a\&\]\:hover\:bg-secondary\/90:hover { background-color: var(--secondary); } @supports (color: color-mix(in lab, red, red)) { a.\[a\&\]\:hover\:bg-secondary\/90:hover { background-color: color-mix(in oklab, var(--secondary) 90%, transparent); } } a.\[a\&\]\:hover\:text-accent-foreground:hover { color: var(--accent-foreground); } } } @property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; } @property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; } @property --tw-animation-duration { syntax: "*"; inherits: false } @property --tw-animation-fill-mode { syntax: "*"; inherits: false; initial-value: none; } @property --tw-animation-iteration-count { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-blur { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-rotate { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-scale { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-blur { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-exit-rotate { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; } .route-loading-fallback { color: #f8fafc; text-align: center; background: #070911; place-content: center; gap: .85rem; min-height: 100vh; padding: 2rem; display: grid; } .route-loading-fallback > span { border: 3px solid #c4ff2d40; border-top-color: #c4ff2d; border-radius: 999px; width: 2rem; height: 2rem; margin-inline: auto; animation: .7s linear infinite vamnux-route-spin; } .route-loading-fallback strong, .route-loading-fallback small { display: block; } .route-loading-fallback strong { letter-spacing: .05em; text-transform: uppercase; font-size: .95rem; } .route-loading-fallback small { color: #aab2c5; margin-top: .3rem; } @keyframes vamnux-route-spin { to { transform: rotate(360deg); } } .customer-auth-page { color: #f4f6fb; background: radial-gradient(circle at 82% 18%, #7642d859, #0000 28%), #0c0f18; min-height: 100vh; } .customer-auth-page > header { border-bottom: 1px solid #ffffff1a; justify-content: space-between; align-items: center; gap: 20px; min-height: 72px; padding: 0 clamp(18px, 5vw, 72px); display: flex; } .customer-auth-page > header > a:last-child { color: #b8ff43; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; font-weight: 800; text-decoration: none; } .customer-auth-page > section { grid-template-columns: minmax(0, 1.1fr) minmax(330px, .75fr); gap: clamp(30px, 8vw, 130px); max-width: 1120px; margin: 0 auto; padding: clamp(60px, 12vh, 130px) clamp(20px, 5vw, 55px); display: grid; } .customer-auth-copy > span { color: #b8ff43; letter-spacing: .15em; text-transform: uppercase; font-size: 10px; font-weight: 800; } .customer-auth-copy h1 { letter-spacing: -.07em; text-transform: uppercase; margin: 17px 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(70px, 10vw, 130px); font-weight: 800; line-height: .72; } .customer-auth-copy h1 em { color: #b8ff43; font-style: normal; } .customer-auth-copy > p { color: #b7c2d6; max-width: 510px; font-size: 14px; line-height: 1.65; } .customer-auth-copy > div { gap: 10px; margin-top: 28px; display: grid; } .customer-auth-copy > div span { color: #d6deec; align-items: center; gap: 9px; font-size: 11px; display: flex; } .customer-auth-copy > div svg { color: #b8ff43; } .customer-auth-card { background: linear-gradient(150deg, #286dff2e, #131825fa 48%); border: 1px solid #b8ff4359; flex-direction: column; align-items: flex-start; min-height: 390px; padding: clamp(25px, 4vw, 42px); display: flex; box-shadow: 20px 20px #b8ff430f; } .customer-auth-card > svg { color: #b8ff43; } .customer-auth-card > p { color: #b8ff43; letter-spacing: .12em; margin: 26px 0 8px; font-size: 9px; font-weight: 800; } .customer-auth-card h2 { color: #fff; letter-spacing: -.055em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(42px, 5vw, 62px); line-height: .78; } .customer-auth-card > span { color: #b2bfd4; margin: 18px 0 24px; font-size: 11px; line-height: 1.6; } .customer-auth-card > small { color: #8290a6; margin-top: 18px; font-size: 9px; line-height: 1.5; } @media (max-width: 750px) { .customer-auth-page > section { grid-template-columns: 1fr; padding-top: 62px; } .customer-auth-copy h1 { font-size: 76px; } .customer-auth-card { min-height: 0; } .customer-auth-page > header { min-height: 61px; } } .header-socials, .header-auth-actions { align-items: center; gap: 5px; display: flex; } .header-socials { border-right: 1px solid #e0e4eb; padding-right: 5px; } .header-social-button { color: #778095; cursor: pointer; background: none; border: 0; border-radius: 50%; place-items: center; width: 30px; height: 30px; transition: all .18s; display: grid; } .header-social-button:hover, .header-social-button:focus-visible { color: var(--blue); background: #e9edf5; outline: 0; } .header-signin, .header-create-account { cursor: pointer; border-radius: 999px; min-height: 43px; font-size: 11px; font-weight: 800; transition: all .18s; } .header-signin { color: var(--ink); background: none; border: 1px solid #0000; padding: 0 12px; } .header-signin:hover { background: #edf0f5; } .header-create-account { border: 1px solid var(--blue); background: var(--blue); color: #fff; padding: 0 14px; } .header-create-account:hover { background: #174fd4; border-color: #174fd4; } .customer-auth-choices { gap: 9px; width: 100%; margin-top: 20px; display: grid; } .customer-auth-choices .user-secondary-action { justify-content: center; } .user-profile-completion { color: #fff; background: #121820; border: 1px solid #b8ff4373; justify-content: space-between; align-items: center; gap: 16px; margin: 20px 0; padding: 16px 18px; display: flex; } .user-profile-completion p { color: #b5bfd0; margin: 4px 0 0; font-size: 12px; } .user-profile-completion strong { letter-spacing: .08em; text-transform: uppercase; font-size: 12px; } .user-profile-completion button { flex: none; } @media (max-width: 1240px) { .header-socials { display: none; } } @media (max-width: 760px) { .header-auth-actions { gap: 3px; } .header-signin { padding: 0 8px; } .header-create-account { padding: 0 10px; } .user-profile-completion { flex-direction: column; align-items: flex-start; } .commerce-top { gap: 14px; padding: 0 16px; } .header-actions { gap: 5px; } .header-cart { padding: 0 10px; } } .vamnux-utility-shell { min-height: 100vh; padding-top: 58px; } .vamnux-utility-bar { z-index: 80; background: #fff; border-bottom: 1px solid #dce2eb; justify-content: flex-end; align-items: center; min-height: 58px; padding: 8px clamp(14px, 3vw, 38px); display: flex; position: absolute; top: 0; left: 0; right: 0; } .vamnux-utility-controls { align-items: center; gap: 8px; display: flex; } .vamnux-utility-currency, .vamnux-utility-cart { min-height: 39px; color: var(--ink); cursor: pointer; background: #f6f7fa; border: 1px solid #dce2eb; justify-content: center; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; line-height: 1; transition: border-color .18s, background .18s; display: inline-flex; } .vamnux-utility-currency { border-radius: 999px; padding: 0 10px 0 13px; } .vamnux-utility-currency select { appearance: none; min-width: 34px; color: inherit; cursor: pointer; font: inherit; background: none; border: 0; outline: 0; line-height: 1; } .vamnux-utility-currency svg { pointer-events: none; flex: none; } .vamnux-utility-cart { border-color: var(--ink); background: var(--ink); color: #fff; border-radius: 999px; padding: 0 13px; } .vamnux-utility-currency:hover, .vamnux-utility-currency:focus-within { background: #edf0f5; border-color: #aeb9ca; outline: 0; } .vamnux-utility-cart:hover, .vamnux-utility-cart:focus-visible { border-color: var(--blue); background: var(--blue); outline: 0; } .currency-switcher-chevron { pointer-events: none; flex: none; } @media (max-width: 760px) { .vamnux-utility-shell { padding-top: 52px; } .vamnux-utility-bar { min-height: 52px; padding: 6px 14px; } .vamnux-utility-controls { gap: 6px; } .vamnux-utility-currency, .vamnux-utility-cart { min-height: 36px; font-size: 10px; } .vamnux-utility-cart { padding: 0 11px; } .currency-switcher-chevron { display: block !important; } .header-actions > .header-icon, .header-actions > .header-auth-actions { display: none; } .header-actions { justify-self: end; } .header-cart { width: 39px; padding: 0; display: inline-flex !important; } .header-cart span { display: none; } .global-marketplace .commerce-top { grid-template-rows: auto auto auto; grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: auto; padding: 11px 14px; } .global-marketplace .brand { grid-area: 1 / 1; } .global-marketplace .header-actions { flex-wrap: wrap; grid-area: 2 / 1; justify-content: flex-end; gap: 5px; width: 100%; display: flex; } .global-marketplace .market-search { grid-area: 3 / 1; } .global-marketplace .header-actions > .header-icon, .global-marketplace .header-actions > .header-auth-actions { display: inline-flex !important; } .global-marketplace .header-auth-actions { flex: none; gap: 4px; } .global-marketplace .currency-switcher, .global-marketplace .header-icon, .global-marketplace .header-cart, .global-marketplace .header-signin, .global-marketplace .header-create-account { flex: none; min-height: 37px; } .global-marketplace .header-signin { padding: 0 8px; font-size: 10px; } .global-marketplace .header-create-account { padding: 0 10px; font-size: 10px; } .global-marketplace .header-icon:not(.favourite-button) { padding: 0 10px; } .global-marketplace .header-icon:not(.favourite-button) span { display: inline !important; } .global-marketplace .favourite-button { width: 37px; padding: 0; display: inline-flex !important; } .global-marketplace .header-cart { width: 39px; padding: 0; } .global-marketplace .header-cart span { display: none; } } @media (max-width: 360px) { .global-marketplace .commerce-top { padding: 10px; } .global-marketplace .header-actions { gap: 3px; } .global-marketplace .currency-switcher { padding: 0 7px; } .global-marketplace .header-signin { padding: 0 6px; } .global-marketplace .header-create-account { padding: 0 8px; } .global-marketplace .favourite-button { width: 35px; } .global-marketplace .header-cart { width: 37px; } } .commerce-header { background: linear-gradient(#fff 0%, #f7f8fb 100%); } .commerce-top { position: relative; } .commerce-top:after { content: ""; background: linear-gradient(90deg, #0000 0%, #ccd3df 18% 82%, #0000 100%); height: 1px; position: absolute; bottom: 0; left: 32px; right: 32px; } .market-search { background: #fff; border-color: #cbd3df; border-radius: 2px; position: relative; box-shadow: inset 0 -2px #286dff12; } .market-search:before { content: ""; border-top: 1px solid #286dff; border-left: 1px solid #286dff; width: 7px; height: 7px; } .currency-switcher, .header-icon, .header-cart, .header-signin, .header-create-account { border-radius: 2px; } .header-socials { border-right-color: #cbd3df; gap: 1px; padding-right: 8px; } .header-social-button { border-radius: 2px; } .header-social-button:hover, .header-social-button:focus-visible { box-shadow: inset 0 -2px 0 var(--blue); } .header-cart { box-shadow: 3px 3px #10121a24; } .header-create-account { box-shadow: 3px 3px #286dff2e; } .category-button { overflow: visible; } .category-button:after { content: ""; border-bottom: 1px solid #286dff73; border-right: 1px solid #286dff73; width: 14px; height: 14px; position: absolute; bottom: 9px; right: 9px; } .category-button:hover:after { border-color: var(--lime); } .product-card, .supplier-game-card { border: 1px solid #cdd4df; position: relative; box-shadow: 8px 8px #10121a0b; } .product-card:before, .supplier-game-card:before { z-index: 3; content: ""; border-top: 1px solid #b8ff43d9; border-right: 1px solid #b8ff43d9; width: 15px; height: 15px; position: absolute; top: 7px; right: 7px; } .product-card:after, .supplier-game-card:after { z-index: 3; content: ""; pointer-events: none; border-bottom: 1px solid #286dffb3; border-left: 1px solid #286dffb3; width: 15px; height: 15px; position: absolute; bottom: 7px; left: 7px; } .user-dashboard-topbar { box-shadow: inset 0 -1px #b8ff431f; } .user-panel, .user-account-card { position: relative; } .user-panel:before { background: var(--lime); content: ""; width: 26px; height: 2px; position: absolute; top: 0; left: 0; } .policy-page article { border-color: #b8ff4333; position: relative; overflow: hidden; box-shadow: 18px 18px #286dff0e; } .policy-page article:before, .policy-page article:after { content: ""; pointer-events: none; width: 38px; height: 38px; position: absolute; } .policy-page article:before { border-top: 1px solid #b8ff4373; border-right: 1px solid #b8ff4373; top: 14px; right: 14px; } .policy-page article:after { border-bottom: 1px solid #286dffa6; border-left: 1px solid #286dffa6; bottom: 14px; left: 14px; } @media (max-width: 700px) { .user-hero h1 { letter-spacing: -.055em; font-size: clamp(40px, 10vw, 54px); line-height: .85; } } .admin-support-grid { background: #ffffff1a; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); min-height: 520px; display: grid; } .admin-support-list { background: #0e121c; border-right: 1px solid #ffffff1a; align-content: start; display: grid; } .admin-support-list button { color: #c1cad9; cursor: pointer; text-align: left; background: none; border: 0; border-bottom: 1px solid #ffffff14; gap: 6px; padding: 15px; display: grid; } .admin-support-list button:hover, .admin-support-list button.active { background: #286dff1a; } .admin-support-list strong { color: #fff; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; overflow: hidden; } .admin-support-list small { color: #8492a9; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; overflow: hidden; } .admin-support-detail { min-width: 0; padding: 20px; } .admin-support-detail-heading { border-bottom: 1px solid #ffffff1a; padding-bottom: 14px; } .admin-support-detail-heading > strong { color: #b8ff43; letter-spacing: .08em; font-size: 9px; } .admin-support-detail-heading h3 { color: #fff; letter-spacing: -.04em; text-transform: uppercase; margin: 8px 0 4px; font-family: Barlow Condensed, sans-serif; font-size: 35px; } .admin-support-detail-heading p { color: #91a0b6; margin: 0; font-size: 10px; } .admin-ticket-thread { gap: 9px; max-height: 330px; padding: 16px 0; display: grid; overflow: auto; } .admin-ticket-thread article { background: #0d111a; border: 1px solid #ffffff1f; max-width: 82%; padding: 12px; } .admin-ticket-thread article.admin { background: #b8ff4314; border-color: #b8ff4359; justify-self: end; } .admin-ticket-thread strong { color: #b8ff43; text-transform: uppercase; font-size: 9px; } .admin-ticket-thread p { color: #d8e0ed; white-space: pre-wrap; margin: 6px 0; font-size: 11px; line-height: 1.5; } .admin-ticket-thread small { color: #8b98ad; font-size: 9px; } .admin-support-detail form { border-top: 1px solid #ffffff1a; gap: 10px; padding-top: 16px; display: grid; } .admin-support-detail label { color: #b9c5d7; letter-spacing: .07em; text-transform: uppercase; gap: 6px; font-size: 9px; font-weight: 800; display: grid; } .admin-support-detail select, .admin-support-detail textarea { color: #fff; min-height: 41px; font: inherit; background: #0d111a; border: 1px solid #ffffff2e; outline: 0; padding: 10px; font-size: 11px; } .admin-support-detail textarea { resize: vertical; min-height: 95px; } .admin-support-detail select:focus, .admin-support-detail textarea:focus { border-color: #b8ff43; } .admin-support-detail .admin-primary-action { justify-self: start; } @media (max-width: 800px) { .admin-support-grid { grid-template-columns: 1fr; } .admin-support-list { border-bottom: 1px solid #ffffff1a; border-right: 0; max-height: 250px; overflow: auto; } .admin-ticket-thread article { max-width: 94%; } } .user-hero-actions { flex-wrap: wrap; gap: 9px; display: flex; } .user-settings-grid > label, .user-settings-grid > button { background: #131825; padding: 24px; } .user-settings-grid > label { color: #b7c1d3; letter-spacing: .07em; text-transform: uppercase; align-content: start; gap: 7px; font-size: 10px; font-weight: 800; display: grid; } .user-settings-grid > label span { color: #7b879c; font-weight: 600; } .user-settings-grid > label input, .user-settings-grid > label select { color: #fff; background: #0e121d; border: 1px solid #ffffff2e; outline: 0; height: 42px; padding: 0 11px; font-size: 12px; } .user-settings-grid > label input:focus, .user-settings-grid > label select:focus { border-color: #b8ff43; } .user-notification-preferences, .user-support-form { border-bottom: 1px solid #ffffff1a; gap: 12px; padding: 21px; display: grid; } .user-notification-preferences { grid-template-columns: repeat(2, minmax(0, 1fr)); } .user-notification-preferences label { color: #c7d0e0; align-items: center; gap: 8px; min-height: 40px; font-size: 11px; display: flex; } .user-notification-preferences label small { color: #8793a9; font-size: 9px; } .user-notification-preferences input { accent-color: #b8ff43; } .user-notification-preferences .user-primary-action { grid-column: 1 / -1; justify-self: start; } .user-support-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .user-support-form label { color: #b7c1d3; letter-spacing: .07em; text-transform: uppercase; gap: 7px; font-size: 10px; font-weight: 800; display: grid; } .user-support-form label:nth-of-type(3), .user-support-form label:nth-of-type(4) { grid-column: 1 / -1; } .user-support-form input, .user-support-form select, .user-support-form textarea { color: #fff; min-height: 42px; font: inherit; background: #0e121d; border: 1px solid #ffffff2e; outline: 0; padding: 10px 11px; font-size: 12px; } .user-support-form textarea { resize: vertical; min-height: 110px; } .user-support-form input:focus, .user-support-form select:focus, .user-support-form textarea:focus { border-color: #b8ff43; } .user-support-form .user-primary-action, .user-support-form .user-secondary-action { justify-self: start; } .user-ticket-select { min-width: 0; color: inherit; cursor: pointer; text-align: left; background: none; border: 0; } .user-ticket-select strong, .user-ticket-select p { display: block; } .user-ticket-thread { gap: 9px; padding: 18px 21px; display: grid; } .user-ticket-thread article { background: #0e121d; border: 1px solid #ffffff1f; max-width: 80%; padding: 12px; } .user-ticket-thread article.admin { background: #286dff1a; border-color: #286dff8c; justify-self: end; } .user-ticket-thread strong { color: #b8ff43; font-size: 10px; } .user-ticket-thread p { color: #d7deeb; white-space: pre-wrap; margin: 6px 0; font-size: 11px; line-height: 1.5; } .user-ticket-thread small { color: #8491a8; font-size: 9px; } .user-security-grid { background: #ffffff1a; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; display: grid; } .user-security-grid article { background: #131825; padding: 22px; } .user-security-grid svg { color: #b8ff43; } .user-security-grid h3 { color: #fff; letter-spacing: -.04em; text-transform: uppercase; margin: 13px 0 6px; font-family: Barlow Condensed, sans-serif; font-size: 29px; } .user-security-grid p, .user-muted { color: #929eb4; font-size: 11px; line-height: 1.55; } .admin-product-workspace { background: #ffffff1a; grid-template-columns: minmax(0, 1fr) minmax(310px, .78fr); gap: 1px; display: grid; } .admin-product-editor { background: #121723; align-content: start; gap: 12px; padding: 22px; display: grid; } .admin-product-editor h3, .admin-product-list h3 { color: #fff; letter-spacing: -.04em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: 31px; line-height: .86; } .admin-product-editor label { color: #b8c3d4; letter-spacing: .07em; text-transform: uppercase; gap: 6px; font-size: 9px; font-weight: 800; display: grid; } .admin-product-editor input, .admin-product-editor select, .admin-product-editor textarea { color: #fff; background: #0d111a; border: 1px solid #ffffff2b; outline: 0; padding: 10px; font-size: 11px; } .admin-product-editor input, .admin-product-editor select { min-height: 41px; } .admin-product-editor textarea { resize: vertical; min-height: 72px; } .admin-product-editor input:focus, .admin-product-editor select:focus, .admin-product-editor textarea:focus { border-color: #b8ff43; } .admin-product-list { background: #0e121c; min-width: 0; } .admin-product-list-head { border-bottom: 1px solid #ffffff1a; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px; display: flex; } .admin-product-list-head > span { color: #b8ff43; border: 1px solid #b8ff4361; place-items: center; min-width: 28px; height: 28px; font-size: 10px; font-weight: 900; display: grid; } .admin-product-list-tools { border-bottom: 1px solid #ffffff1a; gap: 8px; padding: 12px; display: grid; } .admin-product-list-tools > input { color: #fff; background: #0b0e16; border: 1px solid #b8ff435c; outline: 0; height: 38px; padding: 0 10px; font-size: 10px; } .admin-product-list-tools > input:focus { border-color: #b8ff43; } .admin-product-dom-bulk { color: #aeb9cb; text-transform: uppercase; justify-content: space-between; align-items: center; gap: 10px; font-size: 9px; display: flex; } .admin-product-dom-bulk button { color: #b8ff43; cursor: pointer; font: inherit; text-transform: uppercase; background: none; border: 0; font-weight: 900; } .admin-product-dom-actions { flex-wrap: wrap; gap: 6px; display: flex; } .admin-product-dom-actions input { color: #fff; background: #0b0e16; border: 1px solid #ffffff2e; width: 67px; min-height: 34px; padding: 0 8px; font-size: 10px; } .admin-product-dom-actions .admin-primary-action, .admin-product-dom-actions .admin-secondary-action, .admin-product-dom-actions .admin-danger-action { min-height: 34px; padding: 0 9px; font-size: 8px; } .admin-product-list-scroll { max-height: 690px; overflow: auto; } .admin-product-list-scroll article { border-bottom: 1px solid #ffffff14; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 13px 15px; display: grid; } .admin-product-list-scroll article > input[type="checkbox"] { accent-color: #b8ff43; width: 14px; height: 14px; } .admin-product-list-scroll article.selected { background: #286dff24; box-shadow: inset 3px 0 #286dff; } .admin-product-list-select { text-align: left; cursor: pointer; background: none; border: 0; gap: 4px; min-width: 0; padding: 0; display: grid; } .admin-product-list-select strong { color: #fff; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; overflow: hidden; } .admin-product-list-select small { color: #8794a9; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; overflow: hidden; } .admin-product-list-scroll .admin-secondary-action { min-height: 29px; padding: 0 8px; font-size: 8px; } .admin-visibility-switch { color: #fff; cursor: pointer; letter-spacing: .06em; border: 1px solid #ffffff40; border-radius: 999px; grid-template-columns: 1fr 21px; align-items: center; gap: 5px; width: 65px; height: 28px; padding: 3px 4px 3px 8px; font-size: 9px; font-weight: 900; display: inline-grid; } .admin-visibility-switch i { background: #fff; border-radius: 50%; width: 19px; height: 19px; transition: transform .18s; display: block; box-shadow: 0 1px 5px #00000059; } .admin-visibility-switch.on { background: #4aa50a; border-color: #b8ff43; } .admin-visibility-switch.off { background: #a92736; } .admin-visibility-switch.off i { transform: translateX(-33px); } .admin-visibility-switch:disabled { opacity: .5; cursor: not-allowed; } @media (max-width: 680px) { .admin-product-workspace { grid-template-columns: 1fr; } .admin-product-list-scroll { max-height: 360px; } .admin-product-list-scroll article { grid-template-columns: auto minmax(0, 1fr) auto; } .admin-product-list-scroll .admin-secondary-action { grid-column: 2; justify-self: start; } .admin-product-dom-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; } .admin-product-dom-actions input { width: 100%; } } .admin-category-workspace { background: #ffffff1a; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .78fr); gap: 1px; display: grid; } .admin-category-list { background: #0e121c; min-width: 0; } .admin-category-list-head { border-bottom: 1px solid #ffffff1a; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px; display: flex; } .admin-category-list-head h3, .admin-category-editor h3 { color: #fff; letter-spacing: -.04em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: 29px; line-height: .9; } .admin-category-list-head > span { color: #b8ff43; border: 1px solid #b8ff4361; place-items: center; min-width: 28px; height: 28px; font-size: 10px; font-weight: 900; display: grid; } .admin-category-list-scroll { max-height: 720px; overflow: auto; } .admin-category-list-scroll > article { border-bottom: 1px solid #ffffff1a; } .admin-category-row { justify-content: space-between; align-items: center; gap: 14px; padding: 15px 18px; display: flex; } .admin-category-row > div:first-child { gap: 5px; min-width: 0; display: grid; } .admin-category-row strong { color: #fff; font-size: 12px; } .admin-category-row small { color: #8794a9; font-size: 9px; } .admin-category-row .admin-status { justify-self: start; } .admin-category-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; display: flex; } .admin-category-actions .admin-primary-action, .admin-category-actions .admin-secondary-action, .admin-category-actions .admin-danger-action, .admin-category-product-row .admin-secondary-action { min-height: 29px; padding: 0 8px; font-size: 8px; } .admin-category-products { background: #101624; border-top: 1px solid #b8ff4329; padding: 12px 18px 16px; } .admin-category-products-head { gap: 3px; margin-bottom: 9px; display: grid; } .admin-category-products-head strong { color: #dce6f7; font-size: 10px; } .admin-category-products-head small, .admin-category-empty { color: #8a97ab; margin: 0; font-size: 9px; line-height: 1.5; } .admin-category-product-row { border-top: 1px solid #ffffff12; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; display: flex; } .admin-category-product-row > div { gap: 3px; min-width: 0; display: grid; } .admin-category-product-row strong { color: #fff; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; overflow: hidden; } .admin-category-product-row small { color: #8794a9; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; overflow: hidden; } .admin-category-editor { background: #121723; align-content: start; gap: 12px; padding: 22px; display: grid; } .admin-category-editor > p { color: #94a1b6; margin: 0; font-size: 10px; line-height: 1.5; } .admin-category-editor label { color: #b8c3d4; letter-spacing: .07em; text-transform: uppercase; gap: 6px; font-size: 9px; font-weight: 800; display: grid; } .admin-category-editor input, .admin-category-editor select, .admin-category-editor textarea { color: #fff; background: #0d111a; border: 1px solid #ffffff2b; outline: 0; padding: 10px; font-size: 11px; } .admin-category-editor input, .admin-category-editor select { min-height: 41px; } .admin-category-editor textarea { resize: vertical; min-height: 66px; } .admin-category-editor input:focus, .admin-category-editor select:focus, .admin-category-editor textarea:focus { border-color: #b8ff43; } @media (max-width: 860px) { .admin-category-workspace { grid-template-columns: 1fr; } .admin-category-list-scroll { max-height: 520px; } } @media (max-width: 560px) { .admin-category-row { flex-direction: column; align-items: flex-start; } .admin-category-actions { justify-content: flex-start; } .admin-category-product-row { flex-direction: column; align-items: flex-start; } } .admin-category-list-tools { background: #101624; border-bottom: 1px solid #ffffff17; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px 18px; display: flex; } .admin-category-list-tools > button { color: #dce6f7; cursor: pointer; text-transform: uppercase; background: #0d111a; border: 1px solid #ffffff2e; min-height: 30px; padding: 0 8px; font-size: 8px; font-weight: 900; } .admin-category-list-tools > button:first-child { color: #b8ff43; border-color: #b8ff436b; } .admin-category-list-tools > strong { color: #b8ff43; font-size: 9px; } .admin-category-list-tools > small { color: #8390a6; flex-basis: 100%; font-size: 8px; } .admin-category-list-scroll > article { position: relative; } .admin-category-list-scroll > article.dragging { opacity: .45; outline: 1px dashed #b8ff43; } .admin-category-list-scroll > article > input[type="checkbox"] { accent-color: #b8ff43; width: 13px; height: 13px; position: absolute; top: 18px; left: 6px; } .admin-category-list-scroll > article .admin-category-row { padding-left: 28px; } .admin-category-drag { color: #b8ff43; cursor: grab; background: #0d111a; border: 1px solid #ffffff29; width: 24px; min-height: 29px; font-weight: 900; } .admin-category-quick-overlay { z-index: 100; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background: #04070dc7; place-items: center; padding: 20px; display: grid; position: fixed; inset: 0; } .admin-category-quick-modal { background: #111826; border: 1px solid #b8ff4361; width: min(560px, 100%); max-height: min(650px, 90vh); padding: 24px; position: relative; overflow: auto; box-shadow: 0 25px 80px #0000008c; } .admin-category-quick-modal > button { color: #fff; cursor: pointer; background: none; border: 0; font-size: 24px; line-height: 1; position: absolute; top: 10px; right: 10px; } .admin-category-quick-modal > p { color: #b8ff43; letter-spacing: .1em; margin: 0 0 8px; font-size: 9px; font-weight: 900; } .admin-category-quick-modal h3 { color: #fff; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: 32px; } .admin-category-quick-modal > small { color: #9caac0; margin-top: 9px; font-size: 10px; line-height: 1.5; display: block; } .admin-category-quick-modal ul { gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; display: grid; } .admin-category-quick-modal li { background: #0d111a; border-top: 1px solid #ffffff1a; gap: 3px; padding: 10px; display: grid; } .admin-category-quick-modal li strong { color: #fff; font-size: 11px; } .admin-category-quick-modal li span { color: #91a0b4; font-size: 9px; } @media (max-width: 560px) { .admin-category-list-tools { padding: 10px; } .admin-category-list-tools > button { font-size: 7px; } .admin-category-list-scroll > article .admin-category-row { padding-left: 30px; } } .admin-category-workspace { grid-template-columns: 1fr; } .admin-category-list { grid-column: 1; } .admin-category-list-scroll { max-height: none; } .admin-category-editor { background: #101624; border-top: 1px solid #b8ff4347; grid-column: 1; padding: 16px 18px; } .admin-category-editor h3 { font-size: 22px; } .admin-category-editor > p { max-width: 720px; } .admin-category-editor .admin-funding-actions { margin-top: 4px; } .admin-shell > main { background: linear-gradient(#151b2a94, #0b0e16 430px); } .admin-hero { background: radial-gradient(circle at 84% 12%, #614ce499, #0000 34%), linear-gradient(116deg, #131f4c 0%, #111827 58%, #17132b 100%); border: 1px solid #85a2ff3d; min-height: 188px; position: relative; overflow: hidden; } .admin-hero:after { z-index: 0; content: ""; background-color: #0000; background-image: linear-gradient(90deg, #b8ff4317 1px, #0000 1px), linear-gradient(0deg, #b8ff430f 1px, #0000 1px); background-position: 0 0, 0 0; background-repeat: repeat, repeat; background-size: 42px 42px; background-attachment: scroll, scroll; background-origin: padding-box, padding-box; background-clip: border-box, border-box; position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, #000, #0000 78%); mask-image: linear-gradient(90deg, #000, #0000 78%); } .admin-hero > div { z-index: 1; position: relative; } .admin-hero h1 { font-size: clamp(54px, 6vw, 82px); } .admin-metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; } .admin-metric-grid article { background: linear-gradient(145deg, #151c2b, #101521); border-color: #ffffff1c; min-height: 118px; position: relative; overflow: hidden; } .admin-metric-grid article:after { content: ""; background: #286dff; height: 3px; position: absolute; bottom: 0; left: 0; right: 0; } .admin-metric-grid article:first-child:after { background: #b8ff43; } .admin-metric-grid article:nth-child(3):after { background: #ff6378; } .admin-metric-grid article:nth-child(4):after { background: #8b70ff; } .admin-metric-grid article:nth-child(5):after { background: #50bad7; } .admin-metric-grid strong { font-size: 39px; } .admin-two-column { gap: 10px; } .admin-panel { box-shadow: 0 18px 50px #00000024; } @media (max-width: 1240px) { .admin-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .admin-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-metric-grid article { min-height: 110px; } .admin-metric-grid strong { font-size: 36px; } } .admin-rate-refresh { color: #b8ff43; cursor: pointer; letter-spacing: .08em; text-transform: uppercase; background: #b8ff4314; border: 1px solid #b8ff4380; justify-content: center; align-items: center; min-height: 34px; padding: 0 11px; font-size: 8px; font-weight: 900; transition: transform .16s, background .16s; display: inline-flex; } .admin-rate-refresh:hover { color: #111521; background: #b8ff43; } .admin-rate-refresh:active { transform: scale(.97); } .admin-rate-refresh:disabled { cursor: wait; opacity: .65; } .admin-rate-calculator { background: linear-gradient(100deg, #286dff1f, #b8ff430d); border: 1px solid #286dff61; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); align-items: end; gap: 16px; margin: 0 20px 20px; padding: 16px; display: grid; } .admin-rate-calculator > div { gap: 5px; display: grid; } .admin-rate-calculator > div > span { color: #b8ff43; letter-spacing: .1em; font-size: 8px; font-weight: 900; } .admin-rate-calculator > div > strong { color: #fff; letter-spacing: -.025em; text-transform: uppercase; font-family: Barlow Condensed, sans-serif; font-size: 24px; } .admin-rate-calculator > div > small { color: #9ba9bc; font-size: 9px; line-height: 1.5; } .admin-rate-calculator-fields { grid-template-columns: 1fr 1fr; gap: 9px; display: grid; } .admin-rate-calculator label { color: #b8c3d4; letter-spacing: .07em; text-transform: uppercase; gap: 5px; font-size: 8px; font-weight: 900; display: grid; } .admin-rate-calculator input, .admin-rate-calculator select { color: #fff; background: #0d111a; border: 1px solid #fff3; outline: 0; height: 38px; padding: 0 9px; font-size: 10px; } .admin-rate-calculator input:focus, .admin-rate-calculator select:focus { border-color: #b8ff43; } .admin-rate-calculator-result { color: #dce7fa; border-top: 1px solid #ffffff26; grid-column: 1 / -1; padding-top: 10px; font-size: 10px; line-height: 1.5; } @media (max-width: 700px) { .admin-rate-calculator { grid-template-columns: 1fr; margin: 0 14px 14px; } .admin-rate-calculator-fields { grid-template-columns: 1fr; } .admin-rate-refresh { margin-top: 3px; } } .admin-supplier-overview { background: linear-gradient(115deg, #b8ff430d, #286dff12); border: 1px solid #b8ff4345; margin: 0 20px 20px; } .admin-supplier-overview-head { border-bottom: 1px solid #ffffff1a; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 15px 17px; display: flex; } .admin-supplier-overview-head > div { gap: 4px; display: grid; } .admin-supplier-overview-head > div > span { color: #b8ff43; letter-spacing: .1em; font-size: 8px; font-weight: 900; } .admin-supplier-overview-head > div > strong { color: #fff; letter-spacing: -.03em; text-transform: uppercase; font-family: Barlow Condensed, sans-serif; font-size: 26px; } .admin-supplier-overview-head > div > small { color: #9eabc0; max-width: 660px; font-size: 9px; line-height: 1.5; } .admin-supplier-overview-table td { vertical-align: middle; } .admin-supplier-overview-table td:nth-child(4) strong { font-size: 11px; } .supplier-balance-low { color: #ff7864 !important; } .admin-supplier-overview-actions { flex-wrap: wrap; gap: 6px; display: flex; } .admin-supplier-overview-actions .admin-secondary-action, .admin-supplier-overview-actions .admin-danger-action { min-height: 29px; padding: 0 8px; font-size: 8px; } .admin-supplier-price-modal { width: min(700px, 100%); } .admin-supplier-price-modal li span { line-height: 1.5; } @media (max-width: 700px) { .admin-supplier-overview { margin: 0 14px 14px; } .admin-supplier-overview-head { display: grid; } .admin-supplier-overview-table { min-width: 940px; } } .admin-customer-control-center { background: linear-gradient(115deg, #286dff0f, #b8ff4309); border: 1px solid #286dff47; margin: 0 20px 20px; } .admin-customer-toolbar { border-bottom: 1px solid #ffffff1a; align-items: center; gap: 8px; padding: 14px; display: flex; } .admin-customer-toolbar input { color: #fff; background: #0d111a; border: 1px solid #fff3; outline: 0; flex: 1; min-width: 260px; height: 36px; padding: 0 10px; font-size: 10px; } .admin-customer-toolbar input:focus { border-color: #b8ff43; } .admin-customer-control-table td { vertical-align: middle; } .admin-customer-control-table td strong { font-size: 11px; } .admin-customer-row-actions { flex-wrap: wrap; gap: 6px; display: flex; } .admin-customer-row-actions .admin-secondary-action, .admin-customer-row-actions .admin-primary-action, .admin-customer-row-actions .admin-danger-action { min-height: 29px; padding: 0 8px; font-size: 8px; } .admin-customer-detail { border-top: 1px solid #ffffff1a; gap: 12px; padding: 15px; display: grid; } .admin-customer-detail:empty { display: none; } .admin-customer-detail-head { align-items: center; gap: 10px; display: flex; } .admin-customer-detail-head > span { color: #b8ff43; letter-spacing: .09em; font-size: 8px; font-weight: 900; } .admin-customer-detail-head h3 { color: #fff; letter-spacing: -.03em; text-transform: uppercase; margin: 0 auto 0 0; font-family: Barlow Condensed, sans-serif; font-size: 26px; } .admin-customer-detail-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; display: grid; } .admin-customer-detail-summary article { background: #101622; border: 1px solid #ffffff1c; gap: 4px; padding: 10px; display: grid; } .admin-customer-detail-summary span { color: #9ba9bc; letter-spacing: .08em; text-transform: uppercase; font-size: 8px; font-weight: 900; } .admin-customer-detail-summary strong { font-size: 11px; line-height: 1.45; } .admin-customer-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; display: grid; } .admin-customer-detail-grid section { background: #0d121c; border: 1px solid #ffffff1c; } .admin-customer-detail-grid h4 { border-bottom: 1px solid #ffffff1a; margin: 0; padding: 10px; font-size: 11px; } .admin-customer-detail-grid p { color: #a4afc0; padding: 10px; font-size: 10px; } .admin-customer-detail-grid article { border-bottom: 1px solid #ffffff14; gap: 3px; padding: 10px; display: grid; } .admin-customer-detail-grid article:last-child { border-bottom: 0; } .admin-customer-detail-grid article strong { font-size: 10px; } .admin-customer-detail-grid article small { color: #98a7ba; font-size: 9px; line-height: 1.45; } .admin-customer-suspend-modal { gap: 13px; width: min(500px, 100%); display: grid; } .admin-customer-suspend-modal label { color: #bdc8d8; letter-spacing: .07em; text-transform: uppercase; gap: 6px; font-size: 9px; font-weight: 900; display: grid; } .admin-customer-suspend-modal textarea, .admin-customer-suspend-modal select { color: #fff; background: #0d111a; border: 1px solid #fff3; outline: 0; min-height: 38px; padding: 9px; font-size: 11px; } .admin-customer-suspend-modal textarea { resize: vertical; min-height: 92px; } .admin-customer-suspend-modal textarea:focus, .admin-customer-suspend-modal select:focus { border-color: #ff7864; } @media (max-width: 780px) { .admin-customer-control-center { margin: 0 14px 14px; } .admin-customer-toolbar { flex-wrap: wrap; align-items: stretch; } .admin-customer-toolbar input { order: 3; min-width: 100%; } .admin-customer-control-table { min-width: 1050px; } .admin-customer-detail-summary, .admin-customer-detail-grid { grid-template-columns: 1fr; } .admin-customer-detail-head { flex-wrap: wrap; align-items: flex-start; } .admin-customer-detail-head h3 { order: 3; width: 100%; } } .user-privacy-actions { flex-wrap: wrap; gap: 8px; padding: 18px 21px; display: flex; } .user-privacy-actions button, .user-wallet-list button { color: #b8ff43; cursor: pointer; text-transform: uppercase; background: none; border: 1px solid #b8ff4373; padding: 8px 10px; font-size: 9px; font-weight: 800; } .user-notification-unread { background: #b8ff430b; } .user-policy-list { padding: 0 21px 21px; display: grid; } .user-policy-list a { color: #fff; border-bottom: 1px solid #ffffff17; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 13px 0; font-size: 12px; font-weight: 700; text-decoration: none; display: grid; } .user-policy-list span { color: #8e9bb1; text-transform: uppercase; font-size: 9px; font-weight: 700; } .user-mobile-nav { display: none; } .policy-page { color: #f4f6fb; background: #0c0f18; min-height: 100vh; padding: 0 clamp(18px, 6vw, 120px) 70px; } .policy-page > header { border-bottom: 1px solid #ffffff1a; align-items: center; min-height: 72px; display: flex; } .policy-page > header a { color: #b8ff43; letter-spacing: .08em; text-transform: uppercase; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; text-decoration: none; display: inline-flex; } .policy-page article { background: #131825; border: 1px solid #ffffff1f; max-width: 820px; margin: 54px auto; padding: clamp(22px, 5vw, 48px); } .policy-draft-notice { color: #ffbe67; background: #ffae4514; border: 1px solid #ffae4573; gap: 11px; padding: 14px; display: flex; } .policy-draft-notice strong { text-transform: uppercase; font-size: 11px; display: block; } .policy-draft-notice p { color: #e4bd89; margin: 4px 0 0; font-size: 11px; line-height: 1.5; } .policy-title { gap: 14px; margin: 30px 0; display: flex; } .policy-title svg { color: #b8ff43; } .policy-title span { color: #b8ff43; letter-spacing: .1em; text-transform: uppercase; font-size: 9px; font-weight: 800; } .policy-title h1 { letter-spacing: -.05em; text-transform: uppercase; margin: 7px 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(42px, 6vw, 72px); line-height: .85; } .policy-title p, .policy-body p { color: #aeb9cd; font-size: 13px; line-height: 1.65; } .policy-body h2 { color: #fff; text-transform: uppercase; margin: 22px 0 8px; font-family: Barlow Condensed, sans-serif; font-size: 32px; } @media (max-width: 700px) { .user-notification-preferences, .user-support-form, .user-security-grid { grid-template-columns: 1fr; } .user-support-form label:nth-of-type(3), .user-support-form label:nth-of-type(4) { grid-column: auto; } .user-ticket-thread { padding: 15px; } .user-ticket-thread article { max-width: 94%; } .user-mobile-nav { z-index: 10; background: #10131d; border-top: 1px solid #ffffff1f; grid-template-columns: repeat(4, 1fr); display: grid; position: sticky; bottom: 0; } .user-mobile-nav button { color: #91a0b7; text-transform: uppercase; background: none; border: 0; justify-items: center; gap: 4px; min-height: 60px; font-size: 8px; font-weight: 800; display: grid; } .user-mobile-nav button.active { color: #b8ff43; } .policy-page { padding: 0 16px 40px; } .policy-page article { margin: 25px auto; } .policy-title h1 { font-size: 48px; } .user-dashboard { padding-bottom: 60px; } } :root { --ink: #10121a; --ink-2: #171b28; --paper: #f5f6f8; --white: #fff; --lime: #b8ff43; --blue: #286dff; --violet: #7c44ff; --coral: tomato; --line: #dfe3eb; --muted: #697287; --background: #10121a; --foreground: #f7f8fa; --card: #181d2a; --card-foreground: #f7f8fa; --popover: #181d2a; --popover-foreground: #f7f8fa; --primary: #b8ff43; --primary-foreground: #10121a; --secondary: #252b39; --secondary-foreground: #f7f8fa; --muted-foreground: #b3bac9; --accent: #286dff; --accent-foreground: #fff; --destructive: tomato; --destructive-foreground: #10121a; --border: #ffffff26; --input: #fff3; --ring: #b8ff43; --radius: .25rem; } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--paper); } body { background: var(--paper); min-width: 320px; color: var(--ink); margin: 0; font-family: Nunito Sans, sans-serif; } button, input, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button { border: 0; } a { color: inherit; text-decoration: none; } body, body * { font-family: Inter, system-ui, sans-serif !important; } h1, h2, h3, h4, h5, h6 { font-family: Poppins, Inter, sans-serif !important; } .user-hero h1 { letter-spacing: -.05em; overflow-wrap: anywhere; max-width: 100%; font-size: clamp(48px, 5.2vw, 76px); line-height: .82; } .global-marketplace { background: var(--paper); overflow: clip; } .global-announcement { color: #aab2c3; letter-spacing: .12em; text-transform: uppercase; background: #0c0e14; justify-content: center; align-items: center; gap: 50px; min-height: 34px; padding: 7px 25px; font-size: 9px; font-weight: 700; display: flex; } .global-announcement span { align-items: center; gap: 6px; display: inline-flex; } .global-announcement svg { color: var(--lime); } .global-announcement strong { color: #fff; font-weight: 700; } .commerce-header { z-index: 25; background: #fff; position: relative; box-shadow: 0 1px #10121a1a; } .commerce-top { grid-template-columns: 180px minmax(280px, 1fr) auto; align-items: center; gap: 26px; width: min(1440px, 100%); min-height: 91px; margin: 0 auto; padding: 0 32px; display: grid; } .brand { width: max-content; color: var(--ink); letter-spacing: -.04em; text-transform: uppercase; align-items: center; gap: 9px; font-family: Barlow Condensed, sans-serif; font-size: 29px; font-weight: 800; line-height: 1; display: inline-flex; } .brand img { object-fit: contain; width: 34px; height: 34px; } .brand span span { color: #63bf20; } .market-search { color: #778095; background: #f8f9fb; border: 1px solid #d8dce5; border-radius: 10px; align-items: center; gap: 12px; height: 51px; padding-left: 17px; display: flex; box-shadow: inset 0 2px 7px #181b280a; } .market-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px #286dff1c; } .market-search input { min-width: 0; height: 100%; color: var(--ink); background: none; border: 0; outline: 0; flex: 1; font-size: 13px; } .market-search input::placeholder { color: #8d95a6; } .search-category { color: #4f586b; white-space: nowrap; border-left: 1px solid #dce0e7; align-items: center; gap: 8px; height: 100%; padding: 0 16px; font-size: 12px; font-weight: 700; display: inline-flex; } .header-actions { align-items: center; gap: 9px; display: flex; } .currency-switcher, .header-icon, .header-cart { min-height: 43px; color: var(--ink); cursor: pointer; background: #f4f5f8; border: 1px solid #e0e4eb; justify-content: center; align-items: center; transition: all .18s; display: inline-flex; } .currency-switcher { border-radius: 999px; gap: 4px; padding: 0 10px; } .currency-switcher select { appearance: none; color: var(--ink); cursor: pointer; background: none; border: 0; outline: 0; padding: 0 2px; font-size: 11px; font-weight: 800; } .currency-switcher:hover, .header-icon:hover { background: #edf0f5; border-color: #b5bfce; } .header-icon { border-radius: 999px; gap: 6px; padding: 0 11px; font-size: 11px; font-weight: 700; } .favourite-button { width: 43px; padding: 0; } .header-cart { border-color: var(--ink); background: var(--ink); color: #fff; border-radius: 999px; gap: 7px; padding: 0 13px; font-size: 11px; font-weight: 800; position: relative; } .header-cart:hover { background: var(--blue); border-color: var(--blue); } .header-cart b { background: var(--lime); width: 17px; height: 17px; color: var(--ink); border-radius: 50%; place-items: center; font-size: 9px; display: grid; position: absolute; top: -5px; right: -4px; } .commerce-categories { color: #f2f4f8; scrollbar-width: none; background: #0c0e14; align-items: center; gap: 3px; min-height: 57px; padding: 0 max(32px, 50vw - 688px); display: flex; overflow-x: auto; } .commerce-categories::-webkit-scrollbar { display: none; } .commerce-categories a, .commerce-categories button, .scope-status { color: #f2f4f8; cursor: pointer; white-space: nowrap; background: none; flex: none; align-items: center; gap: 8px; padding: 11px 15px; font-size: 12px; font-weight: 700; transition: all .18s; display: inline-flex; } .commerce-categories a:hover, .commerce-categories button:hover { color: var(--lime); } .scope-status { color: var(--lime); cursor: default; margin-left: auto; } .gaming-only { grid-template-columns: 1fr; } .gaming-only .category-button { flex-direction: row; justify-content: flex-start; align-items: center; gap: 13px; min-height: 100px; } .gaming-only .category-button svg:last-child { align-self: auto; margin-left: auto; } .carousel-panel { color: #fff; border-radius: 12px; width: min(1376px, 100%); min-height: 414px; margin: 0 auto; transition: background .55s; position: relative; overflow: hidden; box-shadow: 0 18px 44px #1a1d2d24; } .palette-violet { background: linear-gradient(118deg, #121629 0%, #24276c 43%, #7d4cf8 100%); } .palette-jade { background: linear-gradient(118deg, #0d1e28 0%, #105b61 47%, #00a37c 100%); } .palette-ember { background: linear-gradient(118deg, #25141b 0%, #783025 50%, #ff6439 100%); } .carousel-grid { opacity: .42; background-image: linear-gradient(#ffffff21 1px, #0000 1px), linear-gradient(90deg, #ffffff21 1px, #0000 1px); background-size: 48px 48px; position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, #000 0%, #0000 77%); mask-image: linear-gradient(90deg, #000 0%, #0000 77%); } .carousel-panel:after { content: ""; border: 1px solid #ffffff38; width: 310px; height: 160%; position: absolute; top: -30%; right: 18%; transform: rotate(28deg); box-shadow: 90px 0 #ffffff12, 180px 0 #ffffff0f; } .carousel-content { z-index: 2; width: min(680px, 58%); padding: 67px 60px 55px; animation: .45s cubic-bezier(.23, 1, .32, 1) both carousel-in; position: relative; } .carousel-kicker, .global-section-label { color: var(--lime); letter-spacing: .15em; text-transform: uppercase; align-items: center; gap: 9px; margin: 0; font-size: 10px; font-weight: 800; display: flex; } .carousel-kicker span { background: currentColor; width: 24px; height: 2px; } .carousel-content h1 { letter-spacing: -.06em; text-transform: uppercase; margin: 16px 0 14px; font-family: Barlow Condensed, sans-serif; font-size: clamp(58px, 6.5vw, 103px); font-weight: 800; line-height: .8; } .carousel-content h1 em { color: var(--lime); font-style: italic; } .carousel-copy { color: #ffffffdb; max-width: 475px; margin: 0; font-size: 14px; line-height: 1.6; } .carousel-actions { align-items: center; gap: 20px; margin-top: 26px; display: flex; } .carousel-primary, .carousel-secondary { cursor: pointer; letter-spacing: .04em; text-transform: uppercase; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; display: inline-flex; } .carousel-primary { background: var(--lime); color: var(--ink); padding: 13px 16px; transition: transform .18s, box-shadow .18s; } .carousel-primary:hover { transform: translateY(-2px); box-shadow: 5px 5px #ffffffd9; } .carousel-secondary { border-bottom: 1px solid var(--lime); color: #fff; background: none; padding: 8px 0; } .carousel-terminal { z-index: 2; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); clip-path: polygon(0 0, 93% 0, 100% 9%, 100% 100%, 8% 100%, 0 91%); background: #0c0e1430; border: 1px solid #ffffff94; width: min(31%, 366px); min-height: 270px; padding: 19px; position: absolute; top: 73px; right: 7.3%; } .terminal-top, .terminal-bottom { color: #ffffffc2; letter-spacing: .12em; justify-content: space-between; align-items: center; font-size: 8px; font-weight: 800; display: flex; } .terminal-top i { background: var(--lime); width: 36px; height: 2px; } .terminal-price { gap: 5px; margin: 38px 0 32px; display: grid; } .terminal-price strong { letter-spacing: -.04em; text-transform: uppercase; font-family: Barlow Condensed, sans-serif; font-size: 53px; line-height: .82; } .terminal-price span { color: #ffffffbd; font-size: 10px; line-height: 1.5; } .terminal-bars { border-bottom: 1px solid #ffffff5c; align-items: end; gap: 6px; height: 62px; padding-bottom: 7px; display: flex; } .terminal-bars i { background: var(--lime); width: 12%; display: block; } .terminal-bars i:first-child { height: 21%; } .terminal-bars i:nth-child(2) { height: 48%; } .terminal-bars i:nth-child(3) { height: 35%; } .terminal-bars i:nth-child(4) { height: 72%; } .terminal-bars i:nth-child(5) { height: 57%; } .terminal-bars i:nth-child(6) { height: 89%; } .terminal-bars i:nth-child(7) { height: 69%; } .terminal-bottom { margin-top: 14px; } .terminal-bottom span:first-child { color: var(--lime); } .carousel-controls { z-index: 4; gap: 12px; display: flex; position: absolute; bottom: 21px; left: 60px; } .carousel-controls button { color: #ffffff8f; cursor: pointer; background: none; border-bottom: 1px solid #ffffff73; padding: 0 0 4px; font-family: Barlow Condensed, sans-serif; font-size: 14px; font-weight: 700; } .carousel-controls button.active { border-color: var(--lime); width: 36px; color: var(--lime); } .global-promises { background: #fff; grid-template-columns: repeat(4, 1fr); width: min(1376px, 100%); margin: 0 auto; display: grid; transform: translateY(-1px); box-shadow: 0 5px 22px #161a2614; } .global-promises > div { border-right: 1px solid #e3e6ec; align-items: center; gap: 11px; min-height: 76px; padding: 15px 24px; display: flex; } .global-promises > div:last-child { border-right: 0; } .global-promises svg { color: var(--blue); flex: none; } .global-promises > div:first-child svg { color: #f29a1b; } .global-promises span { gap: 2px; display: grid; } .global-promises strong { font-size: 11px; } .global-promises small { color: #6b7487; font-size: 10px; line-height: 1.35; } .global-category-row { background: #fff; padding: 66px 32px 56px; } .global-section-label { width: min(1376px, 100%); color: var(--blue); margin: 0 auto 14px; } .category-list { border-top: 1px solid #dfe3ea; border-bottom: 1px solid #dfe3ea; grid-template-columns: repeat(6, 1fr); width: min(1376px, 100%); margin: 0 auto; display: grid; } .category-button { min-height: 125px; color: var(--ink); cursor: pointer; text-align: left; background: #fff; border-right: 1px solid #dfe3ea; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 17px 18px; transition: background .2s, color .2s; display: flex; position: relative; overflow: hidden; } .category-button:first-child { border-left: 1px solid #dfe3ea; } .category-button:before { content: ""; border: 1px solid var(--blue); width: 30px; height: 30px; position: absolute; top: -15px; right: -15px; transform: rotate(45deg); } .category-button span { letter-spacing: -.02em; text-transform: uppercase; font-family: Barlow Condensed, sans-serif; font-size: 23px; font-weight: 700; line-height: .9; } .category-button svg:last-child { color: var(--blue); align-self: end; transition: transform .2s; } .category-button:hover { background: var(--ink); color: #fff; } .category-button:hover svg:last-child { color: var(--lime); transform: translateX(4px); } .category-button:hover:before { border-color: var(--lime); } .supplier-recognition { color: var(--ink); background: #fff; padding: 0 32px 74px; } .supplier-recognition-head { border-top: 1px solid #dfe3ea; justify-content: space-between; align-items: end; gap: 35px; width: min(1376px, 100%); margin: 0 auto 25px; padding-top: 21px; display: flex; } .supplier-recognition-head h2 { letter-spacing: -.055em; text-transform: uppercase; margin: 14px 0 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(44px, 5vw, 74px); font-weight: 800; line-height: .79; } .supplier-recognition-head h2 em { color: var(--coral); font-style: italic; } .supplier-recognition-head > p { color: #596277; width: min(395px, 100%); margin: 0; font-size: 13px; line-height: 1.62; } .supplier-game-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; width: min(1376px, 100%); margin: 0 auto; display: grid; } .supplier-game-card { color: #fff; background: #10121a; border: 1px solid #d9dee8; border-radius: 10px; min-width: 0; overflow: hidden; box-shadow: 0 8px 20px #1417231a; } .supplier-game-card img { aspect-ratio: 1; object-fit: cover; background: #202638; width: 100%; display: block; } .supplier-game-card div { gap: 4px; min-height: 67px; padding: 10px; display: grid; } .supplier-game-card span { color: var(--lime); letter-spacing: .09em; text-transform: uppercase; font-size: 8px; font-weight: 800; } .supplier-game-card strong { letter-spacing: -.02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; font-family: Barlow Condensed, sans-serif; font-size: 20px; line-height: .9; overflow: hidden; } .product-section { background: var(--paper); color: var(--ink); padding: 94px 32px 90px; } .global-product-section { border-top: 1px solid #e2e5eb; } .section-heading { justify-content: space-between; align-items: end; gap: 35px; width: min(1376px, 100%); margin: 0 auto 39px; display: flex; } .eyebrow { color: var(--blue); letter-spacing: .15em; text-transform: uppercase; align-items: center; gap: 10px; font-size: 10px; font-weight: 800; display: flex; } .eyebrow span { background: currentColor; width: 22px; height: 2px; } .section-heading h2, .process-intro h2, .support-cta h2 { letter-spacing: -.06em; text-transform: uppercase; margin: 14px 0 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(62px, 7vw, 111px); font-weight: 800; line-height: .78; } .section-heading h2 em { color: var(--blue); font-style: italic; } .section-heading-right { width: min(385px, 100%); } .section-heading-right p { color: #596277; margin: 0 0 18px; font-size: 13px; line-height: 1.62; } .all-products-button { border-bottom: 1px solid var(--ink); color: var(--ink); cursor: pointer; letter-spacing: .08em; text-transform: uppercase; background: none; align-items: center; gap: 8px; padding: 0 0 5px; font-size: 11px; font-weight: 800; display: inline-flex; } .filter-row { border-top: 1px solid #cbd1dc; align-items: center; gap: 8px; width: min(1376px, 100%); margin: 0 auto 20px; padding-top: 16px; display: flex; } .filter-chip { color: #515b6e; cursor: pointer; background: none; border: 1px solid #c8ced9; border-radius: 999px; padding: 8px 12px; font-size: 10px; font-weight: 800; transition: all .18s; } .filter-chip:hover, .filter-chip.active { border-color: var(--ink); background: var(--ink); color: #fff; } .price-display-note { color: #697287; margin-left: auto; font-size: 10px; } .price-display-note strong { color: var(--blue); letter-spacing: .07em; } .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; width: min(1376px, 100%); margin: 0 auto; display: grid; } .product-card { background: #fff; min-width: 0; transition: transform .2s, box-shadow .2s; animation: .48s cubic-bezier(.23, 1, .32, 1) both card-in; overflow: hidden; box-shadow: 0 10px 24px #14172314; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px #14172326; } .product-image-wrap { background: #1e2436; height: 188px; position: relative; overflow: hidden; } .product-image-wrap:after { content: ""; z-index: 1; background: linear-gradient(#0000, #00000073); height: 35%; position: absolute; inset: auto 0 0; } .product-image-wrap img { z-index: 0; object-fit: cover; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.23, 1, .32, 1); position: relative; } .product-image-fallback { z-index: 0; color: var(--lime); text-align: center; background: linear-gradient(135deg, #172153, #6937c8); align-content: center; place-items: center; gap: 8px; padding: 18px; display: grid; position: absolute; inset: 0; } .product-image-fallback span { color: #fff; letter-spacing: -.02em; text-transform: uppercase; font-family: Barlow Condensed, sans-serif; font-size: 22px; font-weight: 800; line-height: .9; } .product-card:hover .product-image-wrap img { transform: scale(1.06); } .product-badge { z-index: 2; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%); color: var(--ink); letter-spacing: .07em; text-transform: uppercase; background: #fff; padding: 5px 11px 5px 8px; font-size: 9px; font-weight: 800; position: absolute; top: 10px; left: 10px; } .tone-ember .product-badge { background: #ffbb38; } .tone-ice .product-badge { background: #92d8ff; } .tone-lime .product-badge { background: var(--lime); } .tone-coral .product-badge { background: var(--coral); } .tone-cobalt .product-badge { background: var(--blue); color: #fff; } .play-frame { z-index: 2; clip-path: polygon(0 0, 20px 0, 20px 2px, calc(100% - 20px) 2px, calc(100% - 20px) 0, 100% 0, 100% 20px, calc(100% - 2px) 20px, calc(100% - 2px) calc(100% - 20px), 100% calc(100% - 20px), 100% 100%, calc(100% - 20px) 100%, calc(100% - 20px) calc(100% - 2px), 20px calc(100% - 2px), 20px 100%, 0 100%, 0 calc(100% - 20px), 2px calc(100% - 20px), 2px 20px, 0 20px); border: 1px solid #b8ff43b3; position: absolute; inset: 8px; } .corner-mark { z-index: 2; color: #fff; letter-spacing: .08em; font-family: Barlow Condensed, sans-serif; font-size: 12px; font-weight: 800; position: absolute; bottom: 10px; right: 10px; } .product-content { flex-direction: column; min-height: 232px; padding: 16px 14px 13px; display: flex; } .product-name { color: var(--blue); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 3px; font-size: 9px; font-weight: 800; } .product-content h3 { letter-spacing: -.025em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: 23px; font-weight: 700; line-height: .92; } .market-tags { flex-wrap: wrap; gap: 4px; margin: 10px 0 0; display: flex; } .market-tags span { color: #414c61; letter-spacing: .04em; text-transform: uppercase; border: 1px solid #cbd1dc; padding: 4px 5px; font-size: 8px; font-weight: 800; line-height: 1; } .market-tags span:first-child { color: #3251bf; background: #ebefff; border-color: #aebfff; } .product-description { color: #667086; min-height: 34px; margin: 9px 0; font-size: 10px; line-height: 1.4; } .product-buy-row { border-top: 1px solid #d8dce4; justify-content: space-between; align-items: end; gap: 5px; margin-top: auto; padding-top: 10px; display: flex; } .product-buy-row div { gap: 1px; display: grid; } .product-buy-row strong { letter-spacing: -.035em; font-family: Barlow Condensed, sans-serif; font-size: 26px; font-weight: 700; line-height: 1; } .product-buy-row small { color: #7b8497; letter-spacing: .04em; text-transform: uppercase; font-size: 8px; font-weight: 700; } .product-buy-row button { background: var(--ink); color: #fff; cursor: pointer; text-transform: uppercase; align-items: center; gap: 5px; padding: 9px 10px; font-size: 10px; font-weight: 800; transition: all .18s; display: inline-flex; } .product-buy-row button:hover { background: var(--blue); } .empty-results { color: #667086; text-align: center; border: 1px dashed #bfc6d2; grid-column: 1 / -1; padding: 58px 20px; } .empty-results h3 { color: var(--ink); text-transform: uppercase; margin: 12px 0 6px; font-family: Barlow Condensed, sans-serif; font-size: 31px; } .empty-results p { margin: 0 0 18px; font-size: 12px; } .empty-results button { background: var(--ink); color: #fff; cursor: pointer; text-transform: uppercase; padding: 10px 13px; font-size: 10px; font-weight: 800; } .catalog-note { color: #657085; align-items: center; gap: 7px; width: min(1376px, 100%); margin: 17px auto 0; font-size: 10px; line-height: 1.45; display: flex; } .catalog-note svg { color: var(--blue); flex: none; } .catalog-note strong { color: var(--blue); letter-spacing: .04em; font-size: 9px; } .process-section { color: #fff; background: #131824; grid-template-columns: .86fr 1.14fr; gap: 78px; padding: 105px 32px; display: grid; } .process-intro { justify-self: end; width: 100%; max-width: 565px; } .section-marker { color: var(--lime); letter-spacing: .14em; text-transform: uppercase; align-items: center; gap: 10px; font-size: 10px; font-weight: 800; display: flex; } .process-intro h2 { color: #fff; margin: 18px 0 21px; font-size: clamp(62px, 6.5vw, 102px); } .process-intro h2 em { color: var(--coral); font-style: italic; } .process-intro p { color: #c3cad7; max-width: 377px; margin: 0 0 24px; font-size: 13px; line-height: 1.65; } .process-intro a { border-bottom: 1px solid var(--lime); color: var(--lime); letter-spacing: .06em; text-transform: uppercase; align-items: center; gap: 8px; padding-bottom: 6px; font-size: 11px; font-weight: 800; display: inline-flex; } .steps-list { border-top: 1px solid #ffffff26; align-self: end; } .step-item { border-bottom: 1px solid #ffffff26; grid-template-columns: 55px 1fr 35px; align-items: start; gap: 15px; padding: 23px 0; display: grid; } .step-item > span { color: var(--lime); font-family: Barlow Condensed, sans-serif; font-size: 19px; font-weight: 700; } .step-item h3 { letter-spacing: -.025em; text-transform: uppercase; margin: 0 0 7px; font-family: Barlow Condensed, sans-serif; font-size: 31px; line-height: .95; } .step-item p { color: #c3cad7; max-width: 430px; margin: 0; font-size: 12px; line-height: 1.55; } .step-item > svg { color: var(--coral); } .trust-section { grid-template-columns: repeat(3, 1fr); display: grid; } .trust-card { flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: 250px; padding: 33px clamp(25px, 4vw, 63px); display: flex; position: relative; overflow: hidden; } .trust-card:after { content: ""; opacity: .2; mix-blend-mode: soft-light; background-image: repeating-linear-gradient(0deg, #0000, #0000 5px, #fff9 6px); position: absolute; inset: 0; } .trust-card > * { z-index: 1; position: relative; } .trust-card h3 { letter-spacing: -.035em; text-transform: uppercase; margin: 21px 0 8px; font-family: Barlow Condensed, sans-serif; font-size: clamp(29px, 3vw, 42px); line-height: .9; } .trust-card p { max-width: 310px; margin: 0; font-size: 12px; line-height: 1.55; } .trust-ticket { clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); color: #fff; letter-spacing: .11em; background: #10121ae6; order: -1; padding: 4px 9px 4px 6px; font-size: 8px; font-weight: 800; } .trust-dark { background: var(--blue); color: #fff; } .trust-lime { background: var(--lime); color: var(--ink); } .trust-coral { background: var(--coral); color: var(--ink); } .trust-lime .trust-ticket, .trust-coral .trust-ticket { background: var(--ink); } .support-cta { isolation: isolate; color: #fff; background: #0e121d; min-height: 500px; padding: 83px 32px 70px; position: relative; overflow: hidden; } .support-cta:before { content: ""; z-index: -1; opacity: .29; background-image: linear-gradient(#b8ff4333 1px, #0000 1px), linear-gradient(90deg, #b8ff4333 1px, #0000 1px); background-size: 62px 62px; position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, #000, #0000); mask-image: linear-gradient(90deg, #000, #0000); } .support-cta > :not(.terminal-stack) { width: min(1376px, 100%); margin-left: auto; margin-right: auto; position: relative; } .support-cta h2 { max-width: 835px; margin: 18px auto; font-size: clamp(66px, 8.5vw, 132px); } .support-cta h2 em { color: var(--lime); font-style: italic; } .support-cta p { color: #c6ccda; max-width: 380px; margin: 0 auto 23px; font-size: 13px; line-height: 1.6; } .support-cta p b { color: var(--lime); letter-spacing: .12em; font-size: 9px; } .support-cta button, .cart-checkout button { background: var(--lime); color: var(--ink); cursor: pointer; letter-spacing: .04em; text-transform: uppercase; align-items: center; gap: 10px; padding: 14px 18px; font-size: 11px; font-weight: 800; transition: all .18s; display: inline-flex; } .support-cta button:hover, .cart-checkout button:hover { box-shadow: 5px 5px 0 var(--blue); transform: translateY(-2px); } .terminal-stack { z-index: -1; width: min(42vw, 580px); height: calc(100% - 64px); position: absolute; top: 32px; right: 4%; } .terminal-stack:before, .terminal-stack:after { content: ""; border: 2px solid var(--lime); clip-path: polygon(0 0, 86% 0, 100% 14%, 100% 100%, 14% 100%, 0 86%); position: absolute; inset: 0; } .terminal-stack:before { border-color: var(--blue); transform: translate(28px, 26px); } .terminal-stack:after { border-color: var(--coral); transform: translate(13px, 13px); } .terminal-stack i { background: repeating-linear-gradient(90deg, var(--lime) 0 11%, transparent 11% 14%); border-top: 1px solid #ffffffa6; border-bottom: 1px solid #ffffff38; height: 13%; position: absolute; left: 14%; right: 13%; } .terminal-stack i:first-child { top: 21%; } .terminal-stack i:nth-child(2) { background: repeating-linear-gradient(90deg, var(--blue) 0 7%, transparent 7% 10%); top: 43%; } .terminal-stack i:nth-child(3) { background: repeating-linear-gradient(90deg, var(--coral) 0 16%, transparent 16% 19%); top: 65%; } footer { color: #fff; background: #090b11; padding: 34px 32px 20px; } .footer-top, .footer-bottom { width: min(1376px, 100%); margin: 0 auto; display: flex; } .footer-top { align-items: center; gap: 29px; padding-bottom: 29px; } .footer-top .brand { color: #fff; } .footer-top p { color: #9ba4b5; max-width: 260px; margin: 0; font-size: 11px; line-height: 1.5; } .footer-links { color: #dce0e8; flex-wrap: wrap; gap: 20px; margin-left: auto; font-size: 11px; font-weight: 700; display: flex; } .footer-links a:hover { color: var(--lime); } .footer-bottom { color: #737d91; letter-spacing: .04em; text-transform: uppercase; border-top: 1px solid #ffffff21; justify-content: space-between; padding-top: 17px; font-size: 9px; } .cart-overlay { z-index: 45; opacity: 0; pointer-events: none; background: #04060ca3; transition: opacity .25s; position: fixed; inset: 0; } .cart-overlay.open { opacity: 1; pointer-events: auto; } .cart-drawer { z-index: 50; width: min(440px, 100%); color: var(--ink); background: #f7f8fa; flex-direction: column; transition: transform .32s cubic-bezier(.23, 1, .32, 1); display: flex; position: fixed; inset: 0 0 0 auto; transform: translateX(105%); } .cart-drawer.open { transform: translateX(0); } .cart-drawer-head { border-bottom: 1px solid #d2d7e0; justify-content: space-between; align-items: start; padding: 28px 25px 20px; display: flex; } .cart-drawer-head h2 { text-transform: uppercase; margin: 7px 0 0; font-family: Barlow Condensed, sans-serif; font-size: 48px; line-height: .8; } .cart-drawer-head h2 em { color: var(--blue); font-style: normal; } .cart-drawer-head button, .cart-item > button { color: var(--ink); cursor: pointer; background: none; place-items: center; display: grid; } .cart-items { flex: 1; padding: 8px 25px 25px; overflow: auto; } .cart-empty { text-align: center; color: #687287; place-items: center; min-height: 310px; display: grid; } .cart-empty svg { color: var(--blue); } .cart-empty h3 { color: var(--ink); text-transform: uppercase; margin: 14px 0 5px; font-family: Barlow Condensed, sans-serif; font-size: 31px; } .cart-empty p { margin: 0 0 18px; font-size: 12px; } .cart-empty button { background: var(--ink); color: #fff; cursor: pointer; text-transform: uppercase; padding: 10px 13px; font-size: 10px; font-weight: 800; } .cart-item { border-bottom: 1px solid #d9dde5; grid-template-columns: 64px 1fr 24px; align-items: center; gap: 11px; padding: 13px 0; display: grid; } .cart-item img { object-fit: cover; width: 64px; height: 62px; } .cart-item div { gap: 2px; display: grid; } .cart-item span { color: var(--blue); letter-spacing: .08em; text-transform: uppercase; font-size: 9px; font-weight: 800; } .cart-item strong { text-transform: uppercase; font-family: Barlow Condensed, sans-serif; font-size: 19px; line-height: .9; } .cart-item small { color: #606a7d; font-size: 11px; font-weight: 700; } .cart-checkout { background: #e8ebf0; padding: 19px 25px 25px; } .cart-checkout p { color: #626c7e; margin: 0 0 13px; font-size: 10px; line-height: 1.5; } .cart-checkout p strong { color: var(--ink); } .cart-checkout button { justify-content: center; width: 100%; } @keyframes carousel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes card-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, :before, :after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } } @media (max-width: 1120px) { .commerce-top { grid-template-columns: 165px minmax(220px, 1fr) auto; gap: 14px; } .header-icon span, .favourite-button { display: none; } .carousel-content { width: 60%; padding-left: 42px; } .carousel-controls { left: 42px; } .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .product-card:nth-last-child(-n+2) { display: none; } .global-promises > div { padding: 14px 15px; } .process-section { gap: 45px; } } @media (max-width: 760px) { .global-announcement { justify-content: center; min-height: 32px; padding: 7px 14px; font-size: 8px; } .global-announcement span:first-child, .global-announcement span:last-child { display: none; } .commerce-top { grid-template-columns: 1fr auto; gap: 9px 12px; min-height: 117px; padding: 13px 17px; } .brand { font-size: 26px; } .brand img { width: 30px; height: 30px; } .market-search { grid-area: 2 / 1 / auto / -1; height: 42px; padding-left: 12px; } .market-search input { font-size: 11px; } .market-search svg { width: 17px; } .search-category { display: none; } .header-actions { gap: 6px; } .currency-switcher { min-height: 37px; padding: 0 8px; } .currency-switcher svg { display: none; } .header-cart { min-height: 37px; padding: 0 10px; } .commerce-categories { min-height: 51px; padding: 0 10px; } .commerce-categories a, .commerce-categories button { padding: 9px 10px; font-size: 10px; } .commerce-categories a svg { width: 16px; } .commerce-categories button:first-of-type { margin-left: 0; } .commerce-categories button:last-child { display: none; } .commerce-carousel { padding: 12px 0 17px; } .carousel-panel { border-radius: 0; min-height: 452px; } .carousel-content { width: 100%; padding: 46px 22px 90px; } .carousel-kicker { font-size: 8px; } .carousel-content h1 { margin: 15px 0 13px; font-size: clamp(57px, 18vw, 86px); } .carousel-copy { max-width: 330px; font-size: 12px; } .carousel-actions { gap: 15px; margin-top: 21px; } .carousel-primary { padding: 12px 13px; font-size: 9px; } .carousel-secondary { font-size: 9px; } .carousel-terminal { width: 136px; min-height: 103px; padding: 10px; top: auto; bottom: 59px; right: 22px; } .terminal-top, .terminal-bottom { font-size: 6px; } .terminal-top i { width: 18px; } .terminal-price { gap: 2px; margin: 12px 0 9px; } .terminal-price strong { font-size: 24px; } .terminal-price span { font-size: 7px; line-height: 1.25; } .terminal-bars { gap: 3px; height: 20px; padding-bottom: 2px; } .terminal-bottom { margin-top: 6px; } .carousel-controls { bottom: 21px; left: 22px; } .global-promises { grid-template-columns: 1fr 1fr; } .global-promises > div { border-bottom: 1px solid #e3e6ec; min-height: 79px; padding: 13px 16px; } .global-promises > div:nth-child(2) { border-right: 0; } .global-promises > div:nth-child(3), .global-promises > div:nth-child(4) { border-bottom: 0; } .global-promises strong { font-size: 10px; } .global-promises small { font-size: 8px; } .global-category-row { padding: 48px 18px 38px; } .category-list { grid-template-columns: repeat(3, 1fr); } .category-button { border-bottom: 1px solid #dfe3ea; min-height: 102px; padding: 14px 12px; } .category-button:nth-child(3n) { border-right: 1px solid #dfe3ea; } .category-button span { font-size: 18px; } .category-button svg:first-child { width: 18px; } .product-section { padding: 68px 18px 58px; } .section-heading { margin-bottom: 27px; display: block; } .section-heading h2, .process-intro h2 { font-size: clamp(59px, 18.5vw, 91px); } .section-heading-right { margin-top: 20px; } .section-heading-right p { font-size: 12px; } .filter-row { flex-wrap: wrap; } .price-display-note { width: 100%; margin: 5px 0 0; } .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .product-card:nth-last-child(-n+2) { display: block; } .product-image-wrap { height: 145px; } .product-content { min-height: 231px; padding: 13px 11px 11px; } .product-content h3 { font-size: 20px; } .market-tags span { font-size: 7px; } .product-description { min-height: 43px; font-size: 9px; } .product-buy-row strong { font-size: 22px; } .product-buy-row button { padding: 8px; } .product-buy-row button span { display: none; } .catalog-note { align-items: start; font-size: 9px; } .process-section { grid-template-columns: 1fr; gap: 43px; padding: 70px 23px; } .process-intro { justify-self: auto; } .step-item { grid-template-columns: 35px 1fr 23px; gap: 10px; } .step-item h3 { font-size: 27px; } .step-item p { font-size: 11px; } .trust-section { grid-template-columns: 1fr; } .trust-card { min-height: 205px; padding: 29px 23px; } .support-cta { min-height: 505px; padding: 70px 23px; } .support-cta h2 { font-size: clamp(59px, 18.5vw, 95px); } .terminal-stack { opacity: .78; width: 350px; height: 300px; top: 28px; right: -90px; } .footer-top { flex-direction: column; align-items: flex-start; gap: 17px; } .footer-links { gap: 15px; margin-left: 0; } .footer-bottom { flex-direction: column; gap: 8px; } .cart-drawer { width: 100%; } .supplier-recognition { padding: 0 18px 54px; } .supplier-recognition-head { margin-bottom: 20px; display: block; } .supplier-recognition-head h2 { font-size: clamp(42px, 16vw, 62px); } .supplier-recognition-head > p { margin-top: 18px; font-size: 12px; } .supplier-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .supplier-game-card div { min-height: 61px; padding: 8px; } .supplier-game-card span { font-size: 7px; } .supplier-game-card strong { white-space: normal; font-size: 17px; } } .product-art-label { z-index: 2; color: #fff; letter-spacing: .01em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; background: #0c0e14c7; border: 1px solid #ffffff70; max-width: calc(100% - 20px); padding: 4px 7px; font-family: Barlow Condensed, sans-serif; font-size: 14px; font-weight: 700; line-height: .9; position: absolute; bottom: 29px; right: 10px; overflow: hidden; } .product-name { letter-spacing: .11em; font-size: 10px; } .product-content h3 { font-size: 25px; } @media (max-width: 760px) { .product-art-label { max-width: calc(100% - 16px); font-size: 12px; bottom: 26px; right: 8px; } .product-content h3 { font-size: 22px; } } .supplier-game-card { transition: transform .2s, box-shadow .2s; } .supplier-game-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px #14172333; } .discovery-match-grid { text-align: left; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; max-width: 770px; margin: 22px auto 0; display: grid; } .discovery-match { color: var(--ink); background: #fff; border: 1px solid #d2d8e4; align-items: center; gap: 11px; transition: transform .18s, box-shadow .18s; display: flex; overflow: hidden; box-shadow: 0 7px 15px #1417230f; } .discovery-match:hover { transform: translateY(-3px); box-shadow: 0 12px 24px #1417231f; } .discovery-match img { aspect-ratio: 1; object-fit: cover; width: 64px; } .discovery-match span { gap: 5px; padding: 8px 10px 8px 0; display: grid; } .discovery-match strong { text-transform: uppercase; font-family: Barlow Condensed, sans-serif; font-size: 21px; line-height: .9; } .discovery-match small { color: var(--blue); text-transform: uppercase; align-items: center; gap: 4px; font-size: 9px; font-weight: 800; display: inline-flex; } .scope-status { text-align: right; max-width: 280px; } .category-list:not(.gaming-only) { grid-template-columns: repeat(5, 1fr); } .category-list:not(.gaming-only) .category-button { flex-direction: column; align-items: flex-start; min-height: 125px; } .category-list:not(.gaming-only) .category-button svg:last-child { align-self: end; margin-left: 0; } @media (max-width: 760px) { .scope-status { display: none; } .category-list:not(.gaming-only) { grid-template-columns: repeat(3, 1fr); } .category-list:not(.gaming-only) .category-button { min-height: 102px; } .discovery-match-grid { grid-template-columns: 1fr; } .discovery-match { min-height: 72px; } } .global-category-row { background: linear-gradient(#f7faff 0%, #fff 100%); border-top: 1px solid #e5ebf5; border-bottom: 1px solid #e5ebf5; padding: 56px clamp(18px, 4vw, 64px) 48px; } .category-browser-heading { justify-content: space-between; align-items: end; gap: 28px; max-width: 1440px; margin: 0 auto 20px; display: flex; } .category-browser-heading .global-section-label { margin: 0 0 8px; } .category-browser-heading h2 { color: #17233c; letter-spacing: -.045em; margin: 0; font-family: Nunito Sans, sans-serif; font-size: clamp(23px, 2.4vw, 34px); font-weight: 800; line-height: 1.14; } .category-browser-heading h2 em { color: #286dff; font-style: normal; } .category-browser-heading > p { color: #65738a; max-width: 360px; margin: 0; font-size: 13px; line-height: 1.55; } .category-list.category-browser-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; max-width: 1440px; margin: 0 auto; } .category-button.category-browser-card { color: #1c2941; text-align: left; background: #fff; border: 1px solid #dfe7f2; border-radius: 14px; grid-template-rows: 1fr auto; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 0 11px; min-height: 142px; padding: 16px; transition: transform .18s, border-color .18s, box-shadow .18s; display: grid; position: relative; overflow: hidden; box-shadow: 0 7px 20px #1d345b0d; } .category-button.category-browser-card:after { content: ""; opacity: .8; border-top: 2px solid #8bb4ff; border-right: 2px solid #8bb4ff; width: 22px; height: 22px; position: absolute; top: 0; right: 0; } .category-button.category-browser-card:hover { border-color: #9bbdfa; transform: translateY(-3px); box-shadow: 0 12px 26px #286dff1f; } .category-browser-icon { color: #286dff; background: linear-gradient(135deg, #eef5ff, #e4ecff); border-radius: 12px; align-self: start; place-items: center; width: 42px; height: 42px; display: grid; } .category-browser-copy { align-self: start; gap: 5px; min-width: 0; padding-top: 3px; display: grid; } .category-browser-copy strong { color: #18243c; letter-spacing: -.02em; font-family: Nunito Sans, sans-serif; font-size: 14px; font-weight: 800; line-height: 1.2; } .category-browser-copy small { color: #718098; font-size: 10px; font-weight: 600; line-height: 1.35; } .category-browser-arrow { color: #286dff; grid-column: 2; place-self: end; } @media (max-width: 1100px) { .category-list.category-browser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .global-category-row { padding: 38px 15px 34px; } .category-browser-heading { margin-bottom: 15px; display: block; } .category-browser-heading h2 { font-size: 24px; } .category-browser-heading > p { margin-top: 9px; font-size: 11px; } .category-list.category-browser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .category-button.category-browser-card { border-radius: 12px; grid-template-columns: 34px minmax(0, 1fr); gap: 0 9px; min-height: 116px; padding: 12px; } .category-browser-icon { border-radius: 10px; width: 34px; height: 34px; } .category-browser-icon svg { width: 17px; height: 17px; } .category-browser-copy strong { font-size: 12px; } .category-browser-copy small { font-size: 9px; } .category-browser-arrow { width: 15px; height: 15px; } } .commerce-carousel { background: #f7f9fd; padding: 20px clamp(18px, 4vw, 64px) 22px; } .carousel-panel { border-radius: 16px; min-height: 354px; overflow: hidden; } .carousel-content { width: min(59%, 690px); padding: 46px clamp(28px, 5vw, 62px) 58px; } .carousel-kicker { letter-spacing: .15em; font-size: 9px; } .carousel-content h1 { letter-spacing: -.065em; max-width: 620px; margin: 14px 0 12px; font-family: Nunito Sans, sans-serif; font-size: clamp(39px, 5vw, 67px); font-weight: 800; line-height: .95; } .carousel-copy { max-width: 470px; font-size: 12px; line-height: 1.55; } .carousel-actions { margin-top: 18px; } .carousel-primary, .carousel-secondary { font-size: 10px; } .carousel-terminal { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: #0c133038; border-color: #ffffff47; width: 296px; min-height: 210px; padding: 19px; top: 50%; right: clamp(28px, 6vw, 105px); transform: translateY(-50%); } .terminal-price strong { letter-spacing: -.055em; font-family: Nunito Sans, sans-serif; font-size: 42px; } .terminal-price span { font-size: 10px; line-height: 1.4; } .terminal-top, .terminal-bottom { font-size: 8px; } .terminal-bars { height: 42px; } @media (max-width: 900px) { .carousel-content { width: 64%; } .carousel-terminal { width: 235px; min-height: 174px; padding: 15px; right: 28px; } .terminal-price strong { font-size: 32px; } } @media (max-width: 760px) { .commerce-carousel { padding: 10px 0 15px; } .carousel-panel { border-radius: 0; min-height: 382px; } .carousel-content { width: 100%; padding: 36px 21px 94px; } .carousel-kicker { font-size: 8px; } .carousel-content h1 { max-width: 300px; margin: 12px 0 10px; font-size: clamp(36px, 11.5vw, 47px); line-height: .98; } .carousel-copy { max-width: 290px; font-size: 11px; } .carousel-actions { gap: 13px; margin-top: 16px; } .carousel-primary { padding: 11px 12px; font-size: 9px; } .carousel-secondary { font-size: 9px; } .carousel-terminal { width: 134px; min-height: 99px; padding: 10px; top: auto; bottom: 55px; right: 18px; transform: none; } .terminal-top, .terminal-bottom { font-size: 6px; } .terminal-price { margin: 10px 0 7px; } .terminal-price strong { font-size: 20px; } .terminal-price span { font-size: 7px; } .terminal-bars { gap: 3px; height: 18px; } .carousel-controls { bottom: 19px; left: 21px; } } .selected-product-browser { background: #fff; border: 1px solid #dfe5ee; border-radius: 16px; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .8fr); gap: 14px; margin-top: 18px; padding: 12px; display: grid; box-shadow: 0 12px 32px #1220410f; } .selected-product-browser-dual { grid-template-columns: repeat(2, minmax(0, 1fr)); } .selected-browser-list { background: #fbfcfe; border: 1px solid #e6eaf1; border-radius: 12px; min-width: 0; overflow: hidden; } .selected-browser-list-head { color: #667085; text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid #e5eaf1; justify-content: space-between; gap: 12px; padding: 11px 13px; font-size: 10px; font-weight: 700; display: flex; } .selected-browser-rotation { min-height: 118px; animation: selected-product-rotate .22s var(--ease-out); gap: 7px; padding: 7px; display: grid; } .selected-browser-row { color: #111827; content-visibility: auto; contain-intrinsic-size: 57px; width: 100%; transition: border-color .16s var(--ease-out), background .16s var(--ease-out), transform .16s var(--ease-out); background: none; border: 1px solid #0000; border-radius: 9px; align-items: center; gap: 5px; display: flex; } .selected-browser-row:hover, .selected-browser-row.active { background: #eef5ff; border-color: #b9d0ff; } .selected-browser-row-main { color: #111827; text-align: left; cursor: pointer; background: none; border: 0; flex: 1; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 7px; display: grid; } .selected-browser-row-main:active { transform: scale(.99); } .selected-browser-favorite { color: #53627d; cursor: pointer; background: #fff; border: 1px solid #d6dfeb; border-radius: 8px; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; display: grid; } .selected-browser-favorite:hover, .selected-browser-favorite.saved { color: #e44d3d; background: #fff0ed; border-color: #ff6b57; } .selected-browser-art { color: #c7ff47; background: linear-gradient(135deg, #101938, #3156a6); border-radius: 8px; place-items: center; width: 42px; height: 42px; font-family: Barlow Condensed, sans-serif; font-size: 20px; font-weight: 700; display: grid; overflow: hidden; } .selected-browser-art img { object-fit: cover; width: 100%; height: 100%; } .selected-browser-row-copy { gap: 2px; min-width: 0; display: grid; } .selected-browser-row-copy strong { color: #151b2b; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; overflow: hidden; } .selected-browser-row-copy small { color: #68738a; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; overflow: hidden; } .selected-browser-row-price { color: #173e95; white-space: nowrap; font-size: 12px; font-weight: 800; } .selected-browser-preview { color: #fff; background: linear-gradient(145deg, #0f1734, #182b5e 62%, #3564ad); border-radius: 12px; flex-direction: column; min-height: 432px; display: flex; overflow: hidden; } .selected-product-browser-dual .selected-browser-preview { min-width: 0; min-height: 0; animation: selected-product-rotate .22s var(--ease-out); } .selected-preview-art { background: radial-gradient(circle at 70% 20%, #b8ff4361, #0000 35%), linear-gradient(135deg, #173985, #0b112a); place-items: center; height: 198px; display: grid; overflow: hidden; } .selected-product-browser-dual .selected-preview-art { height: clamp(200px, 19vw, 266px); } .selected-preview-art img { object-fit: cover; width: 100%; height: 100%; } .selected-preview-art > span { color: #c7ff47; font-family: Barlow Condensed, sans-serif; font-size: 86px; font-weight: 800; } .selected-preview-copy { gap: 6px; padding: 15px 16px 10px; display: grid; } .selected-preview-copy p { color: #c7ff47; letter-spacing: .09em; text-transform: uppercase; margin: 0; font-size: 9px; font-weight: 800; } .selected-preview-copy h3 { letter-spacing: -.035em; margin: 0; font-size: 20px; line-height: 1.05; } .selected-preview-copy strong { color: #d8e4ff; font-size: 12px; } .selected-preview-copy > span { color: #a9b9dc; font-size: 10px; } .selected-preview-price { color: #c7ff47; border-top: 1px solid #ffffff24; justify-content: space-between; align-items: center; margin-top: auto; padding: 12px 16px; display: flex; } .selected-preview-price div { gap: 1px; display: grid; } .selected-preview-price span { color: #a9b9dc; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; } .selected-preview-price strong { color: #fff; letter-spacing: -.04em; font-size: 23px; } .selected-preview-actions { grid-template-columns: 1fr 44px 44px; gap: 7px; padding: 0 16px 16px; display: grid; } .selected-preview-actions button { color: #0d1426; cursor: pointer; background: #c7ff47; border: 0; border-radius: 8px; justify-content: center; align-items: center; gap: 7px; min-height: 40px; font-size: 10px; font-weight: 900; display: flex; } .selected-preview-actions button:not(:first-child) { background: #fff; } .selected-preview-actions button.saved { color: #e44d3d; background: #fff0ed; } .selected-preview-actions button:active { transform: scale(.97); } @keyframes selected-product-rotate { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 760px) { .selected-product-browser, .selected-product-browser-dual { border-radius: 12px; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; padding: 8px; } .selected-browser-list-head { padding: 10px; font-size: 9px; } .selected-browser-rotation { min-height: 108px; } .selected-browser-row-main { grid-template-columns: 39px minmax(0, 1fr) auto; gap: 8px; padding: 6px; } .selected-browser-art { width: 39px; height: 39px; } .selected-browser-row-copy strong { font-size: 11px; } .selected-browser-row-copy small { font-size: 9px; } .selected-browser-row-price { font-size: 11px; } .selected-browser-preview { min-height: 0; } .selected-product-browser-dual .selected-preview-art, .selected-preview-art { height: 210px; } .selected-preview-copy { padding: 13px 14px 9px; } .selected-preview-copy h3 { font-size: 18px; } .selected-preview-price { padding: 11px 14px; } .selected-preview-actions { padding: 0 14px 14px; } } @media (max-width: 390px) { .product-grid { grid-template-columns: 1fr; } .product-image-wrap { height: 185px; } .product-content { min-height: 180px; } .product-description { min-height: auto; } .global-promises { grid-template-columns: 1fr; } .global-promises > div { border-right: 0; } .commerce-categories a:nth-child(n+5), .commerce-categories button { display: none; } .commerce-categories a:nth-child(n+5) { display: inline-flex; } } .product-family-list { gap: 22px; width: min(1376px, 100%); margin: 0 auto; display: grid; } .live-game-family { background: #fff; grid-template-columns: minmax(220px, .33fr) 1fr; animation: .48s cubic-bezier(.23, 1, .32, 1) both card-in; display: grid; overflow: hidden; box-shadow: 0 12px 26px #14172314; } .live-game-family-art { background: #1e2436; min-height: 300px; position: relative; overflow: hidden; } .live-game-family-art:after { content: ""; z-index: 1; background: linear-gradient(145deg, #0000 42%, #04060cad); position: absolute; inset: 0; } .live-game-family-art img { z-index: 0; object-fit: cover; width: 100%; height: 100%; display: block; position: relative; } .live-game-family-fallback { z-index: 0; color: var(--lime); background: linear-gradient(135deg, #172153, #6937c8); place-items: center; display: grid; position: absolute; inset: 0; } .live-game-family-currency { z-index: 2; color: #fff; letter-spacing: .08em; font-family: Barlow Condensed, sans-serif; font-size: 14px; font-weight: 800; position: absolute; bottom: 12px; right: 12px; } .live-game-family-content { min-width: 0; padding: 25px; } .live-game-family-heading { border-bottom: 1px solid #dce1e9; justify-content: space-between; align-items: end; gap: 18px; padding-bottom: 18px; display: flex; } .live-game-family-heading h3 { letter-spacing: -.04em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(38px, 4vw, 58px); line-height: .82; } .live-game-family-heading > p { color: #657085; text-align: right; max-width: 250px; margin: 0; font-size: 11px; line-height: 1.45; } .service-denomination-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 17px; display: grid; } .service-denomination-card { background: #fbfcfe; border: 1px solid #dce1e9; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 166px; padding: 14px; transition: transform .18s, box-shadow .18s, border-color .18s; display: flex; } .service-denomination-card:hover { border-color: #b6c3dc; transform: translateY(-3px); box-shadow: 0 10px 18px #14172314; } .service-denomination-card h4 { letter-spacing: -.025em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: 27px; line-height: .88; } .service-denomination-buy { justify-content: space-between; align-items: end; gap: 6px; padding-top: 11px; display: flex; } .service-denomination-buy > div { gap: 1px; display: grid; } .service-denomination-buy strong { letter-spacing: -.035em; font-family: Barlow Condensed, sans-serif; font-size: 25px; font-weight: 700; line-height: 1; } .service-denomination-buy small { color: #7b8497; letter-spacing: .04em; text-transform: uppercase; font-size: 8px; font-weight: 700; } .service-denomination-buy button { background: var(--ink); color: #fff; cursor: pointer; text-transform: uppercase; align-items: center; gap: 5px; padding: 8px 9px; font-size: 9px; font-weight: 800; transition: all .18s; display: inline-flex; } .service-denomination-buy button:hover { background: var(--blue); } @media (max-width: 920px) { .live-game-family { grid-template-columns: 190px 1fr; } .service-denomination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .live-game-family { grid-template-columns: 1fr; } .live-game-family-art { min-height: 210px; } .live-game-family-content { padding: 18px; } .live-game-family-heading { display: block; } .live-game-family-heading h3 { font-size: 43px; } .live-game-family-heading > p { text-align: left; max-width: none; margin-top: 10px; } .service-denomination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .service-denomination-card { min-height: 155px; padding: 11px; } .service-denomination-card h4 { font-size: 23px; } .service-denomination-buy button span { display: none; } } @media (max-width: 390px) { .service-denomination-grid { grid-template-columns: 1fr; } .service-denomination-card { min-height: 140px; } } .compact-game-listing { background: #fff; border: 1px solid #dce1e9; animation: .42s cubic-bezier(.23, 1, .32, 1) both card-in; overflow: hidden; box-shadow: 0 7px 16px #1417230f; } .compact-game-listing-button { width: 100%; min-height: 112px; color: var(--ink); cursor: pointer; text-align: left; background: #fff; border: 0; grid-template-columns: 112px 1fr auto; align-items: center; transition: background .18s, transform .18s; display: grid; } .compact-game-listing-button:hover { background: #f3f7ff; transform: translateY(-2px); } .compact-game-image { background: #16203f; width: 112px; height: 112px; position: relative; overflow: hidden; } .compact-game-image img { z-index: 1; object-fit: cover; width: 100%; height: 100%; position: relative; } .compact-game-image .live-game-family-fallback { z-index: 0; } .compact-game-image > span { z-index: 2; color: #fff; text-transform: uppercase; background: #05080fcc; padding: 3px 5px; font-size: 8px; font-weight: 800; position: absolute; bottom: 7px; left: 7px; } .compact-game-copy { min-width: 0; padding: 18px 20px; } .compact-game-copy p, .detail-eyebrow { color: var(--blue); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 5px; font-size: 9px; font-weight: 800; } .compact-game-copy h3 { letter-spacing: -.035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(28px, 3vw, 40px); line-height: .86; overflow: hidden; } .compact-game-copy > span { color: #687489; text-transform: uppercase; margin-top: 8px; font-size: 10px; font-weight: 700; display: block; } .compact-game-action { color: var(--blue); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; align-items: center; gap: 6px; margin-right: 20px; font-size: 10px; font-weight: 800; display: inline-flex; } .game-family-page { min-height: 100vh; color: var(--ink); background: #f4f6fb; } .family-page-header { background: #fff; border-bottom: 1px solid #dce1e9; justify-content: space-between; align-items: center; gap: 16px; min-height: 75px; padding: 0 clamp(18px, 5vw, 78px); display: flex; } .family-brand { color: var(--ink); cursor: pointer; letter-spacing: -.04em; background: none; border: 0; font-family: Barlow Condensed, sans-serif; font-size: 28px; font-weight: 800; } .family-brand span:not(.family-brand-mark) { color: var(--lime); } .family-brand-mark { background: var(--blue); color: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); place-items: center; width: 25px; height: 25px; margin-right: 6px; font-size: 14px; display: inline-grid; } .family-header-actions { align-items: center; gap: 9px; display: flex; } .family-currency { color: #233053; border: 1px solid #dce1e9; border-radius: 18px; align-items: center; gap: 5px; padding: 8px 10px; display: flex; } .family-currency select { background: none; border: 0; font-size: 11px; font-weight: 800; } .family-cart-button { background: var(--ink); color: #fff; cursor: pointer; text-transform: uppercase; border: 0; align-items: center; gap: 7px; padding: 10px 13px; font-size: 11px; font-weight: 800; display: inline-flex; } .family-cart-button b { background: var(--lime); min-width: 18px; height: 18px; color: var(--ink); border-radius: 50%; place-items: center; display: grid; } .family-detail-hero { max-width: 1250px; margin: 0 auto; padding: 34px clamp(18px, 5vw, 60px) 42px; } .family-back { color: #506079; cursor: pointer; text-transform: uppercase; background: none; border: 0; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; display: inline-flex; } .family-detail-hero-grid { background: var(--ink); color: #fff; grid-template-columns: minmax(260px, .7fr) 1fr; margin-top: 19px; display: grid; overflow: hidden; box-shadow: 0 18px 32px #10121a2b; } .family-detail-art { background: #1e2436; min-height: 310px; position: relative; overflow: hidden; } .family-detail-art:after { content: ""; z-index: 1; background: linear-gradient(120deg, #0000 40%, #05070dbd); position: absolute; inset: 0; } .family-detail-art img { z-index: 0; object-fit: cover; width: 100%; height: 100%; display: block; position: relative; } .family-detail-art > span { z-index: 2; background: var(--lime); color: var(--ink); text-transform: uppercase; padding: 5px 8px; font-size: 10px; font-weight: 800; position: absolute; bottom: 16px; left: 18px; } .family-detail-summary { flex-direction: column; justify-content: center; padding: 42px; display: flex; } .family-detail-summary .detail-eyebrow { color: var(--lime); } .family-detail-summary h1 { letter-spacing: -.06em; text-transform: uppercase; max-width: 650px; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(56px, 7vw, 104px); line-height: .78; } .family-detail-summary > p { color: #c8d0df; max-width: 560px; line-height: 1.55; } .family-detail-summary > div { color: var(--lime); text-transform: uppercase; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 10px; font-size: 10px; font-weight: 800; display: flex; } .family-services { max-width: 1250px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 60px) 80px; } .family-services-heading { justify-content: space-between; align-items: end; gap: 25px; padding: 9px 0 26px; display: flex; } .family-services-heading h2 { letter-spacing: -.06em; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(54px, 6vw, 88px); line-height: .76; } .family-services-heading h2 em { color: var(--blue); font-style: normal; } .family-services-heading > p { color: #667389; max-width: 420px; margin: 0; font-size: 12px; line-height: 1.55; } .family-service-list { gap: 10px; display: grid; } .family-service-row { background: #fff; border: 1px solid #dce1e9; grid-template-columns: minmax(0, 1fr) 170px 142px; align-items: center; gap: 20px; padding: 18px 21px; display: grid; } .family-service-name h3 { letter-spacing: -.03em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: 31px; line-height: .87; } .family-service-name > p { color: #687489; max-width: 620px; margin: 8px 0; font-size: 11px; line-height: 1.45; } .family-service-price { gap: 4px; display: grid; } .family-service-price strong { letter-spacing: -.04em; font-family: Barlow Condensed, sans-serif; font-size: 34px; line-height: 1; } .family-service-price small { color: #687489; letter-spacing: .04em; text-transform: uppercase; font-size: 8px; font-weight: 800; } .family-service-row > button { background: var(--ink); color: #fff; cursor: pointer; text-transform: uppercase; border: 0; justify-content: center; align-items: center; gap: 7px; min-height: 44px; font-size: 10px; font-weight: 800; transition: background .18s; display: inline-flex; } .family-service-row > button:hover { background: var(--blue); } .family-page-loading { background: var(--ink); color: #fff; text-align: center; place-content: center; gap: 12px; min-height: 100vh; padding: 30px; display: grid; } .family-page-loading button { background: var(--lime); color: var(--ink); cursor: pointer; text-transform: uppercase; border: 0; margin: auto; padding: 10px 14px; font-weight: 800; } @media (max-width: 760px) { .compact-game-listing-button { grid-template-columns: 84px 1fr; min-height: 84px; } .compact-game-image { width: 84px; height: 84px; } .compact-game-copy { padding: 12px; } .compact-game-copy h3 { font-size: 29px; } .compact-game-action { display: none; } .family-page-header { min-height: 65px; padding: 0 15px; } .family-brand { font-size: 24px; } .family-header-actions { gap: 5px; } .family-currency { padding: 7px 8px; } .family-cart-button { padding: 9px; font-size: 0; } .family-cart-button svg { width: 19px; } .family-cart-button b { font-size: 10px; } .family-detail-hero { padding: 22px 0 30px; } .family-back { padding-left: 18px; } .family-detail-hero-grid { grid-template-columns: 1fr; margin-top: 15px; } .family-detail-art { min-height: 235px; } .family-detail-summary { padding: 26px 18px; } .family-detail-summary h1 { font-size: 58px; } .family-services { padding: 0 14px 55px; } .family-services-heading { padding: 5px 4px 22px; display: block; } .family-services-heading > p { margin-top: 16px; } .family-service-row { grid-template-columns: 1fr; gap: 13px; padding: 16px; } .family-service-price { grid-template-columns: 1fr auto; align-items: end; } .family-service-row > button { min-height: 43px; } } .catalog-keyword-search { background: #fff; border: 1px solid #cbd5e5; grid-template-columns: minmax(170px, .7fr) minmax(250px, 1.4fr) minmax(180px, .7fr); align-items: center; gap: 13px; margin: 18px 0 16px; padding: 14px 16px; display: grid; box-shadow: 0 9px 18px #1417230d; } .catalog-keyword-search > div:first-child { color: var(--ink); align-items: center; gap: 8px; display: flex; } .catalog-keyword-search label { letter-spacing: -.02em; text-transform: uppercase; font-family: Barlow Condensed, sans-serif; font-size: 22px; font-weight: 700; } .catalog-keyword-input { background: #f7f9fd; border: 1px solid #b8c4d9; align-items: center; height: 43px; display: flex; } .catalog-keyword-input input { width: 100%; min-width: 0; height: 100%; color: var(--ink); font: inherit; background: none; border: 0; outline: 0; padding: 0 11px; font-size: 12px; } .catalog-keyword-input button { color: #657085; cursor: pointer; background: none; border: 0; place-items: center; width: 38px; height: 100%; display: grid; } .catalog-keyword-input button:disabled { opacity: 0; cursor: default; } .catalog-keyword-search > p { color: #657085; text-align: right; margin: 0; font-size: 10px; font-weight: 700; line-height: 1.45; } .catalog-keyword-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px #286dff1a; } @media (max-width: 760px) { .catalog-keyword-search { grid-template-columns: 1fr; gap: 8px; margin: 14px 0; padding: 13px; } .catalog-keyword-search label { font-size: 20px; } .catalog-keyword-search > p { text-align: left; } } .catalog-scope-switch { background: #eef3fb; border: 1px solid #ced8e8; justify-content: space-between; align-items: center; gap: 18px; margin: 12px 0 0; padding: 11px 14px; display: flex; } .catalog-scope-switch > div:first-child { gap: 3px; display: grid; } .catalog-scope-switch strong { color: var(--ink); letter-spacing: .05em; text-transform: uppercase; font-size: 11px; } .catalog-scope-switch span { color: #637087; font-size: 10px; line-height: 1.35; } .catalog-scope-controls { background: #fff; border: 1px solid #bdcadc; flex: none; display: flex; } .catalog-scope-controls button { color: #57657c; cursor: pointer; letter-spacing: .04em; text-transform: uppercase; background: none; border: 0; border-right: 1px solid #bdcadc; min-height: 33px; padding: 0 10px; font-size: 9px; font-weight: 800; } .catalog-scope-controls button:last-child { border-right: 0; } .catalog-scope-controls button.active { background: var(--ink); color: var(--lime); } @media (max-width: 760px) { .catalog-scope-switch { gap: 10px; padding: 12px; display: grid; } .catalog-scope-controls { width: 100%; } .catalog-scope-controls button { flex: 1; padding: 0 7px; font-size: 8px; } } .compact-family-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; display: grid; } .compact-family-card { min-width: 0; color: var(--ink); cursor: pointer; text-align: left; background: #fff; border: 1px solid #d9dfe9; padding: 0; transition: transform .18s, box-shadow .18s, border-color .18s; animation: .36s cubic-bezier(.23, 1, .32, 1) both card-in; display: grid; overflow: hidden; box-shadow: 0 4px 12px #1417230b; } .compact-family-card:hover { border-color: #286dff; transform: translateY(-3px); box-shadow: 0 13px 22px #1417231f; } .compact-family-art { aspect-ratio: 1; background: linear-gradient(135deg, #111827, #253c87); overflow: hidden; } .compact-family-art img { object-fit: cover; width: 100%; height: 100%; } .compact-family-art > span { width: 100%; height: 100%; color: var(--lime); place-items: center; font-family: Barlow Condensed, sans-serif; font-size: 42px; font-weight: 800; display: grid; } .compact-family-card > div:last-child { gap: 4px; min-width: 0; padding: 10px; display: grid; } .compact-family-card p { color: #728097; letter-spacing: .05em; text-transform: uppercase; margin: 0; font-size: 8px; font-weight: 800; } .compact-family-card strong { letter-spacing: -.02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; font-family: Barlow Condensed, sans-serif; font-size: 21px; line-height: .92; overflow: hidden; } .compact-family-card span { color: #286dff; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; display: flex; } .compact-family-card span svg { flex: none; } @media (max-width: 1000px) { .compact-family-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 640px) { .compact-family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .compact-family-card strong { font-size: 23px; } .compact-family-card > div:last-child { padding: 11px; } } .compact-category-nav { gap: 1px; position: relative; overflow: visible; } .compact-category-menu { flex: none; position: relative; } .compact-category-menu > button, .compact-all-categories { color: #f2f4f8; cursor: pointer; white-space: nowrap; background: none; border: 0; align-items: center; gap: 7px; min-height: 57px; padding: 0 15px; font-size: 12px; font-weight: 700; transition: color .18s, background .18s; display: inline-flex; } .compact-category-menu > button:hover, .compact-category-menu > button[aria-expanded="true"], .compact-all-categories:hover { color: var(--lime); background: #ffffff0b; } .menu-chevron { transition: transform .18s; } .menu-chevron.open { transform: rotate(180deg); } .category-mega-panel { z-index: 40; color: #f8f9fc; background: linear-gradient(135deg, #111622, #1a2130); border: 1px solid #b8ff435c; width: min(680px, 100vw - 36px); padding: 17px 18px 18px; animation: .18s cubic-bezier(.23, 1, .32, 1) both compact-menu-in; position: absolute; top: calc(100% - 1px); left: 0; box-shadow: 0 20px 40px #07090e5c; } .category-mega-heading { border-bottom: 1px solid #ffffff1f; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 12px; display: flex; } .category-mega-heading span { color: var(--lime); letter-spacing: .01em; text-transform: uppercase; align-items: center; gap: 8px; font-family: Barlow Condensed, sans-serif; font-size: 24px; font-weight: 700; display: inline-flex; } .category-mega-heading button { color: #dce5f7; cursor: pointer; text-transform: uppercase; background: none; border: 0; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; display: inline-flex; } .category-mega-heading button:hover { color: var(--lime); } .category-mega-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-top: 13px; display: grid; } .category-mega-links button { color: #f7f8fa; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; background: #ffffff0b; border: 1px solid #ffffff1f; min-width: 0; padding: 10px 11px; font-size: 11px; font-weight: 700; transition: background .18s, border-color .18s, color .18s; overflow: hidden; } .category-mega-links button:hover { border-color: var(--lime); color: var(--lime); background: #b8ff431f; } .category-mega-panel > p { color: #b9c2d2; max-width: 440px; margin: 14px 0 2px; font-size: 11px; line-height: 1.5; } .compact-all-categories { margin-left: 2px; } .compact-catalog-heading { margin-bottom: 22px; } .compact-catalog-heading h2 { font-size: clamp(50px, 5.8vw, 84px); } .compact-catalog-results { width: min(1376px, 100%); margin: 0 auto; display: block; } .compact-catalog-shell { width: 100%; } .compact-catalog-meta { color: #70798b; letter-spacing: .06em; text-transform: uppercase; justify-content: space-between; margin: 0 0 10px; font-size: 10px; font-weight: 800; display: flex; } .compact-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; display: grid; } .compact-product-card { background: #fff; border: 1px solid #d9dfe9; grid-template-rows: 92px minmax(84px, 1fr) auto; min-width: 0; transition: transform .18s, box-shadow .18s, border-color .18s; animation: .36s cubic-bezier(.23, 1, .32, 1) both card-in; display: grid; overflow: hidden; box-shadow: 0 4px 12px #1417230b; } .compact-product-card:hover { border-color: #aab8d0; transform: translateY(-3px); box-shadow: 0 12px 22px #1417231c; } .compact-product-visual { width: 100%; color: var(--lime); cursor: pointer; text-align: left; background: linear-gradient(135deg, #12182a, #293d78); border: 0; position: relative; overflow: hidden; } .compact-product-visual img { object-fit: cover; width: 100%; height: 100%; } .compact-product-icon { background: radial-gradient(circle at 72% 25%, #286dff75, #0000 42%); place-items: center; display: grid; position: absolute; inset: 0; } .compact-product-category { z-index: 2; color: #fff; letter-spacing: .07em; text-transform: uppercase; background: #0a0d15cc; padding: 4px 6px; font-size: 8px; font-weight: 800; position: absolute; top: 8px; left: 8px; } .compact-product-copy { min-width: 0; padding: 11px 12px 9px; } .compact-product-copy p { color: var(--blue); letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; margin: 0 0 5px; font-size: 8px; font-weight: 800; overflow: hidden; } .compact-product-title { min-height: 35px; color: var(--ink); cursor: pointer; letter-spacing: -.02em; text-align: left; text-transform: uppercase; -webkit-line-clamp: 2; background: none; border: 0; -webkit-box-orient: vertical; font-family: Barlow Condensed, sans-serif; font-size: 23px; font-weight: 700; line-height: .84; display: -webkit-box; overflow: hidden; } .compact-product-title:hover { color: var(--blue); } .compact-product-region { color: #737d91; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; margin-top: 7px; font-size: 9px; font-weight: 700; display: block; overflow: hidden; } .compact-product-footer { background: #fbfcfe; border-top: 1px solid #e4e7ed; justify-content: space-between; align-items: end; gap: 8px; padding: 9px 10px 10px 12px; display: flex; } .compact-product-footer > div:first-child { gap: 3px; min-width: 0; display: grid; } .compact-product-footer strong { letter-spacing: -.035em; font-family: Barlow Condensed, sans-serif; font-size: 27px; font-weight: 800; line-height: .9; } .compact-product-footer small { color: #7d8798; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; font-size: 7px; font-weight: 800; overflow: hidden; } .compact-product-actions { align-items: center; gap: 5px; display: flex; } .compact-product-details, .compact-product-add { cursor: pointer; letter-spacing: .04em; text-transform: uppercase; border: 0; justify-content: center; align-items: center; gap: 4px; min-height: 30px; font-size: 8px; font-weight: 800; display: inline-flex; } .compact-product-details { color: #53617a; background: none; } .compact-product-details:hover { color: var(--blue); } .compact-product-add { background: var(--ink); color: #fff; min-width: 32px; padding: 0 8px; } .compact-product-add:hover { background: var(--blue); } .compact-catalog-more { color: var(--ink); cursor: pointer; text-transform: uppercase; background: #fff; border: 1px solid #bfc9db; align-items: center; gap: 7px; margin: 19px auto 0; padding: 11px 14px; font-size: 10px; font-weight: 800; display: flex; } .compact-catalog-more:hover { border-color: var(--ink); background: var(--ink); color: var(--lime); } @keyframes compact-menu-in { from { opacity: 0; transform: translateY(-5px)scale(.99); } to { opacity: 1; transform: translateY(0)scale(1); } } @media (max-width: 1000px) { .compact-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .category-mega-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scope-status { display: none; } } @media (max-width: 760px) { .compact-category-nav { overflow-x: auto; } .compact-category-menu > button, .compact-all-categories { min-height: 51px; padding: 0 10px; font-size: 10px; } .compact-category-menu > button .menu-chevron { display: none; } .category-mega-panel { z-index: 60; width: auto; max-height: 65vh; position: fixed; inset: auto 10px 12px; overflow: auto; } .category-mega-links { grid-template-columns: 1fr 1fr; } .compact-catalog-heading h2 { font-size: clamp(49px, 16vw, 72px); } .compact-catalog-meta { margin-bottom: 8px; } .compact-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .compact-product-card { grid-template-rows: 76px minmax(83px, 1fr) auto; } .compact-product-copy { padding: 10px 9px 8px; } .compact-product-title { min-height: 33px; font-size: 20px; } .compact-product-footer { padding: 8px 9px 9px; display: block; } .compact-product-footer strong { font-size: 24px; } .compact-product-actions { justify-content: space-between; margin-top: 7px; } .compact-product-details { padding-left: 0; } .compact-product-add span { display: none; } .compact-product-add { min-width: 30px; padding: 0; } .compact-product-copy p { font-size: 7px; } .compact-product-region { font-size: 8px; } .compact-product-footer small { font-size: 6px; } } @media (max-width: 390px) { .compact-product-grid { grid-template-columns: 1fr; } .compact-product-card { grid-template-rows: 1fr auto; grid-template-columns: 90px 1fr; min-height: 126px; } .compact-product-visual { grid-row: 1 / span 2; } .compact-product-copy { padding: 13px 11px 6px; } .compact-product-footer { padding: 6px 10px 10px; display: flex; } .compact-product-actions { margin: 0; } .compact-product-add span { display: inline; } } .market-footer { color: #f5f7fb; background: #080a10; padding: 0; } .market-footer-shell { width: min(1376px, 100%); margin: 0 auto; padding: 54px 32px 20px; } .market-footer-intro { border-bottom: 1px solid #ffffff1f; grid-template-columns: minmax(240px, .75fr) minmax(310px, 1fr); gap: 12px 38px; padding-bottom: 34px; display: grid; } .market-footer-intro .brand { grid-column: 1; align-self: start; } .market-footer-intro h2 { color: #fff; letter-spacing: -.025em; text-transform: uppercase; grid-column: 2; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(31px, 3.3vw, 49px); font-weight: 700; line-height: .91; } .market-footer-intro > p { color: #9da8ba; grid-column: 2; max-width: 540px; margin: 0; font-size: 12px; line-height: 1.65; } .market-footer-social { grid-column: 1 / -1; justify-content: space-between; align-items: center; gap: 18px; margin-top: 8px; display: flex; } .market-footer-social > span, .market-footer-kicker { color: var(--lime); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; font-weight: 800; } .market-footer-social > div { flex-wrap: wrap; gap: 7px; display: flex; } .market-footer-social button { color: #dfe5ee; cursor: pointer; background: #ffffff09; border: 1px solid #ffffff29; align-items: center; gap: 6px; min-height: 31px; padding: 0 9px; font-size: 9px; font-weight: 800; transition: border-color .18s, background .18s, color .18s; display: inline-flex; } .market-footer-social button:hover { border-color: var(--lime); color: var(--lime); background: #b8ff431c; } .market-footer-columns { border-bottom: 1px solid #ffffff1f; grid-template-columns: 1.1fr 1.2fr .9fr 1.15fr; gap: 28px; padding: 39px 0 34px; display: grid; } .market-footer-columns section { align-content: start; gap: 10px; display: grid; } .market-footer-columns h3, .market-footer-payments h3 { color: #fff; letter-spacing: .015em; text-transform: uppercase; margin: 0 0 3px; font-family: Barlow Condensed, sans-serif; font-size: 23px; font-weight: 700; } .market-footer-columns a, .market-footer-columns button { color: #9da8ba; cursor: pointer; width: max-content; max-width: 100%; font: inherit; text-align: left; background: none; border: 0; padding: 0; font-size: 11px; line-height: 1.35; transition: color .18s; } .market-footer-columns a:hover, .market-footer-columns button:hover { color: var(--lime); } .market-footer-payments { border-bottom: 1px solid #ffffff1f; justify-content: space-between; align-items: center; gap: 34px; padding: 28px 0; display: flex; } .market-footer-payments > div:first-child { max-width: 680px; } .market-footer-payments h3 { margin-top: 5px; } .market-footer-payments p { color: #9da8ba; margin: 8px 0 0; font-size: 11px; line-height: 1.6; } .market-footer-payment-badges { flex-wrap: wrap; justify-content: flex-end; gap: 8px; display: flex; } .market-footer-payment-badges button { color: #f7f8fa; cursor: pointer; letter-spacing: .015em; background: #0d111a; border: 1px solid #ffffff2b; min-height: 43px; padding: 0 13px; font-family: Barlow Condensed, sans-serif; font-size: 20px; font-weight: 700; transition: border-color .18s, color .18s, transform .18s; } .market-footer-payment-badges button:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-2px); } .market-footer-payment-badges small { color: #aab5c7; letter-spacing: .05em; margin-left: 3px; font-family: Nunito Sans, sans-serif; font-size: 8px; font-weight: 800; } .market-footer-bottom { color: #768297; letter-spacing: .08em; text-transform: uppercase; justify-content: space-between; gap: 16px; padding-top: 18px; font-size: 9px; font-weight: 700; display: flex; } @media (max-width: 760px) { .market-footer-shell { padding: 40px 20px 18px; } .market-footer-intro { grid-template-columns: 1fr; gap: 12px; padding-bottom: 28px; } .market-footer-intro .brand, .market-footer-intro h2, .market-footer-intro > p { grid-column: 1; } .market-footer-intro h2 { margin-top: 7px; font-size: 38px; } .market-footer-social { grid-column: 1; gap: 10px; display: grid; } .market-footer-social button span { display: none; } .market-footer-social > div { gap: 6px; } .market-footer-social button { justify-content: center; min-width: 34px; padding: 0 8px; } .market-footer-social button:nth-child(3), .market-footer-social button:nth-child(5) { min-width: auto; padding: 0 9px; } .market-footer-social button:nth-child(3) span, .market-footer-social button:nth-child(5) span { display: inline; } .market-footer-columns { grid-template-columns: 1fr 1fr; gap: 29px 18px; padding: 31px 0; } .market-footer-columns h3, .market-footer-payments h3 { font-size: 21px; } .market-footer-columns a, .market-footer-columns button { font-size: 10px; } .market-footer-payments { gap: 18px; padding: 25px 0; display: grid; } .market-footer-payment-badges { justify-content: flex-start; } .market-footer-payment-badges button { min-height: 39px; font-size: 18px; } .market-footer-bottom { gap: 7px; font-size: 8px; line-height: 1.5; display: grid; } } @media (max-width: 390px) { .market-footer-columns { grid-template-columns: 1fr; gap: 26px; } .market-footer-intro h2 { font-size: 35px; } } .site-footer { color: #f4f7fc; background: #080a10; } .site-footer-shell { width: min(1376px, 100%); margin: 0 auto; padding: 0 32px 20px; } .site-footer-trust { border-bottom: 1px solid #ffffff1f; grid-template-columns: repeat(4, 1fr); display: grid; } .site-footer-trust > div { border-right: 1px solid #ffffff1a; grid-template-columns: 20px 1fr; column-gap: 9px; min-height: 86px; padding: 19px 18px; display: grid; } .site-footer-trust > div:last-child { border-right: 0; } .site-footer-trust svg { color: var(--lime); grid-row: 1 / span 2; } .site-footer-trust strong { text-transform: uppercase; font-size: 10px; } .site-footer-trust span { color: #9ca7b9; margin-top: 4px; font-size: 9px; line-height: 1.45; } .site-footer-brand-row { border-bottom: 1px solid #ffffff1f; grid-template-columns: 1fr 1.35fr auto; align-items: center; gap: 30px; padding: 36px 0 24px; display: grid; } .site-footer-brand, .public-info-brand { color: #fff; letter-spacing: -.04em; align-items: center; width: max-content; font-family: Barlow Condensed, sans-serif; font-size: 31px; font-weight: 800; text-decoration: none; display: inline-flex; } .site-footer-brand span, .public-info-brand span { clip-path: polygon(0 0, 100% 50%, 0 100%); background: linear-gradient(135deg, var(--blue), var(--lime)); color: #0b0e16; place-items: center; width: 25px; height: 25px; margin-right: 7px; font-family: Nunito Sans, sans-serif; font-size: 9px; display: grid; } .site-footer-brand em, .public-info-brand em { color: var(--lime); font-style: normal; } .site-footer-brand-row > p { color: #9da8ba; max-width: 430px; margin: 0; font-size: 12px; line-height: 1.55; } .site-footer-about { color: var(--lime); text-transform: uppercase; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; text-decoration: none; display: inline-flex; } .site-footer-follow { border-bottom: 1px solid #ffffff1f; justify-content: space-between; align-items: center; gap: 26px; padding: 18px 0; display: flex; } .site-footer-follow > div:first-child { align-items: baseline; gap: 14px; display: flex; } .site-footer-follow > div:first-child > span, .site-footer-payments > div:first-child > span { color: var(--lime); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; font-weight: 800; } .site-footer-follow p { color: #778397; margin: 0; font-size: 10px; } .site-footer-social-status { flex-wrap: wrap; justify-content: flex-end; gap: 7px; display: flex; } .site-footer-social-status span { color: #8792a4; border: 1px solid #ffffff21; align-items: center; gap: 6px; min-height: 29px; padding: 0 8px; font-size: 9px; font-weight: 700; display: inline-flex; } .site-footer-grid { border-bottom: 1px solid #ffffff1f; grid-template-columns: 1.1fr 1.2fr .9fr 1.15fr; gap: 28px; padding: 36px 0; display: grid; } .site-footer-column { align-content: start; gap: 10px; display: grid; } .site-footer-column h2, .site-footer-payments h2 { color: #fff; text-transform: uppercase; margin: 0 0 4px; font-family: Barlow Condensed, sans-serif; font-size: 24px; font-weight: 700; } .site-footer-column a { color: #a0aabb; width: max-content; max-width: 100%; font-size: 11px; line-height: 1.35; text-decoration: none; transition: color .18s; } .site-footer-column a:hover { color: var(--lime); } .site-footer-payments { border-bottom: 1px solid #ffffff1f; justify-content: space-between; align-items: center; gap: 30px; padding: 25px 0; display: flex; } .site-footer-payments h2 { margin-top: 4px; } .site-footer-payments p { color: #9da8ba; max-width: 670px; margin: 7px 0 0; font-size: 11px; line-height: 1.55; } .site-footer-payment-link { color: #fff; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; max-width: 420px; text-decoration: none; display: flex; } .site-footer-payment-link strong { border: 1px solid #ffffff29; padding: 10px 12px; font-family: Barlow Condensed, sans-serif; font-size: 20px; } .site-footer-payment-link small { color: #aeb8c8; letter-spacing: .06em; font-family: Nunito Sans, sans-serif; font-size: 8px; } .site-footer-payment-link em { width: 100%; color: var(--lime); text-align: right; text-transform: uppercase; font-size: 9px; font-style: normal; font-weight: 800; } .site-footer-bottom { color: #788497; letter-spacing: .07em; text-transform: uppercase; justify-content: space-between; gap: 14px; padding-top: 17px; font-size: 9px; font-weight: 700; display: flex; } .site-footer-bottom a { color: #a5b0c1; text-decoration: none; } .site-footer-bottom a:hover { color: var(--lime); } .public-info-page { color: #111724; background: #f6f8fc; min-height: 100vh; } .public-info-header { background: #fff; border-bottom: 1px solid #dfe5ee; justify-content: space-between; align-items: center; gap: 20px; padding: 17px max(24px, 50vw - 688px); display: flex; } .public-info-header > div { align-items: center; gap: 37px; display: flex; } .public-info-header nav { flex-wrap: wrap; gap: 18px; display: flex; } .public-info-header nav a { color: #58657a; font-size: 11px; font-weight: 800; text-decoration: none; } .public-info-header > button { color: #fff; cursor: pointer; background: #101522; border: 0; align-items: center; gap: 7px; min-height: 37px; padding: 0 13px; font-size: 10px; font-weight: 800; display: inline-flex; } .info-hero { color: #fff; background: radial-gradient(circle at 78% 30%, #286dff52, #0000 27%), linear-gradient(125deg, #101628, #1d2c72 58%, #5e37bc); padding: 70px max(24px, 50vw - 590px); position: relative; overflow: hidden; } .info-hero:after { content: ""; opacity: .42; pointer-events: none; background-image: linear-gradient(#ffffff12 1px, #0000 1px), linear-gradient(90deg, #ffffff12 1px, #0000 1px); background-size: 31px 31px; position: absolute; inset: 0; } .info-hero > * { z-index: 1; position: relative; } .info-breadcrumb { color: #c8d5ff; align-items: center; gap: 6px; margin-bottom: 33px; font-size: 10px; font-weight: 800; display: flex; } .info-breadcrumb a { color: var(--lime); text-decoration: none; } .info-hero > span:not(.info-breadcrumb span) { color: var(--lime); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; font-weight: 800; } .info-hero h1 { letter-spacing: -.045em; text-transform: uppercase; max-width: 850px; margin: 13px 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(52px, 7.5vw, 102px); font-weight: 700; line-height: .84; } .info-hero p { color: #d8e0ef; max-width: 670px; margin: 0; font-size: 14px; line-height: 1.6; } .info-content { width: min(1180px, 100%); margin: 0 auto; padding: 52px 28px 70px; } .info-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; display: grid; } .info-sections section { background: #fff; border: 1px solid #dce3ee; padding: 25px; box-shadow: 0 7px 18px #1e28450e; } .info-sections h2 { letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 10px; font-family: Barlow Condensed, sans-serif; font-size: 31px; } .info-sections p { color: #536177; margin: 0; font-size: 13px; line-height: 1.65; } .info-sections ul { gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; display: grid; } .info-sections li { color: #48566c; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.5; display: flex; } .info-sections li svg { color: var(--blue); flex: none; margin-top: 2px; } .info-cta-row { flex-wrap: wrap; gap: 10px; margin-top: 24px; display: flex; } .info-primary-action, .info-secondary-action { cursor: pointer; text-transform: uppercase; border: 0; justify-content: center; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; font-size: 10px; font-weight: 800; text-decoration: none; display: inline-flex; } .info-primary-action { background: var(--lime); color: #101522; } .info-secondary-action { color: #101522; background: #fff; border: 1px solid #bfc9da; } .info-callout { background: #eff6ff; border: 1px solid #bad7ff; align-items: flex-start; gap: 14px; margin: 20px 0; padding: 20px; display: flex; } .info-callout svg { color: var(--blue); flex: none; } .info-callout strong { font-size: 13px; } .info-callout p { color: #536177; margin: 5px 0 0; font-size: 12px; line-height: 1.55; } .info-faq-list { gap: 9px; display: grid; } .info-faq-list details { background: #fff; border: 1px solid #dce3ee; } .info-faq-list summary { cursor: pointer; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 19px; font-size: 13px; font-weight: 800; list-style: none; display: flex; } .info-faq-list summary::-webkit-details-marker { display: none; } .info-faq-list details[open] summary { color: var(--blue); } .info-faq-list details[open] summary svg { transform: rotate(90deg); } .info-faq-list p { color: #546178; max-width: 780px; margin: 0; padding: 0 19px 18px; font-size: 13px; line-height: 1.6; } .info-help-search { background: #fff; border: 1px solid #dce3ee; grid-template-columns: 20px 1fr; align-items: center; gap: 10px; margin-bottom: 17px; padding: 16px; display: grid; } .info-help-search svg { color: var(--blue); } .info-help-search input { color: #111724; min-width: 0; font: inherit; border: 0; outline: 0; } .info-help-search span { color: #728097; grid-column: 1 / -1; font-size: 10px; } .info-topic-grid { grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 20px 0; display: grid; } .info-topic-grid a { color: #303b4e; background: #fff; border: 1px solid #dce3ee; align-items: center; gap: 7px; min-height: 66px; padding: 12px; font-size: 11px; font-weight: 800; text-decoration: none; display: flex; } .info-topic-grid a svg:last-child { color: var(--blue); margin-left: auto; } .info-catalog-shelf { margin-top: 25px; } .info-section-heading { justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 11px; display: flex; } .info-section-heading span { color: #5d6a81; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; font-weight: 800; } .info-section-heading a { color: var(--blue); align-items: center; gap: 5px; font-size: 10px; font-weight: 800; text-decoration: none; display: inline-flex; } .info-catalog-shelf > div:last-child { grid-template-columns: repeat(4, 1fr); gap: 10px; display: grid; } .info-catalog-shelf > div:last-child > a { color: #172033; background: #fff; border: 1px solid #dce3ee; gap: 7px; min-height: 142px; padding: 14px; text-decoration: none; display: grid; } .info-catalog-shelf > div:last-child > a > span { color: var(--blue); letter-spacing: .08em; text-transform: uppercase; font-size: 8px; font-weight: 800; } .info-catalog-shelf strong { text-transform: uppercase; font-family: Barlow Condensed, sans-serif; font-size: 23px; line-height: .95; } .info-catalog-shelf small { color: #6b778b; font-size: 9px; line-height: 1.45; } .info-catalog-shelf > a svg { color: var(--blue); } .info-state { color: #536177; background: #fff; border: 1px dashed #bac6d7; justify-items: start; gap: 8px; margin-top: 22px; padding: 24px; font-size: 12px; line-height: 1.55; display: grid; } .info-state strong { color: #111724; } .info-state svg { color: var(--blue); } .info-state a { color: var(--blue); align-items: center; gap: 6px; font-weight: 800; text-decoration: none; display: inline-flex; } .info-state.error { color: #8a3529; border-color: #ffb2a7; } @media (max-width: 760px) { .site-footer-shell { padding: 0 20px 16px; } .site-footer-trust { grid-template-columns: 1fr 1fr; } .site-footer-trust > div:nth-child(2) { border-right: 0; } .site-footer-trust > div:nth-child(-n+2) { border-bottom: 1px solid #ffffff1a; } .site-footer-brand-row { grid-template-columns: 1fr; gap: 13px; padding: 28px 0 21px; } .site-footer-follow { gap: 13px; display: grid; } .site-footer-follow > div:first-child { gap: 5px; display: grid; } .site-footer-social-status { justify-content: flex-start; } .site-footer-social-status span { font-size: 8px; } .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 29px 20px; padding: 30px 0; } .site-footer-payments { gap: 16px; display: grid; } .site-footer-payment-link { justify-content: flex-start; } .site-footer-payment-link em { text-align: left; } .site-footer-bottom { gap: 7px; font-size: 8px; line-height: 1.5; display: grid; } .public-info-header { padding: 14px 18px; } .public-info-header > div { gap: 16px; } .public-info-header nav { display: none; } .public-info-brand { font-size: 27px; } .info-hero { padding: 46px 21px; } .info-hero h1 { font-size: 57px; } .info-hero p { font-size: 13px; } .info-content { padding: 33px 18px 48px; } .info-sections { grid-template-columns: 1fr; } .info-sections section { padding: 20px; } .info-topic-grid, .info-catalog-shelf > div:last-child { grid-template-columns: 1fr 1fr; } .info-catalog-shelf strong { font-size: 21px; } } @media (max-width: 390px) { .site-footer-grid { grid-template-columns: 1fr; gap: 25px; } .site-footer-trust { grid-template-columns: 1fr; } .site-footer-trust > div { border-bottom: 1px solid #ffffff1a; border-right: 0; } .site-footer-trust > div:last-child { border-bottom: 0; } .info-topic-grid, .info-catalog-shelf > div:last-child { grid-template-columns: 1fr; } .info-hero h1 { font-size: 51px; } } .public-info-header .public-info-brand { color: #101522; } .policy-page { color: #121a2b; background: #f5f7fb; min-height: 100vh; } .policy-article { width: min(900px, 100%); margin: 0 auto; padding: 40px 24px 74px; } .policy-article > header { justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; display: flex; } .policy-article > header a { color: #286dff; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; text-decoration: none; display: inline-flex; } .policy-article > header span { color: #78849a; letter-spacing: .1em; font-size: 9px; font-weight: 800; } .policy-title { grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 13px; margin: 24px 0 28px; display: grid; } .policy-title > svg { color: #286dff; } .policy-title span, .policy-support span { color: #286dff; letter-spacing: .11em; text-transform: uppercase; font-size: 9px; font-weight: 850; } .policy-title h1 { color: #17223a; letter-spacing: -.045em; text-transform: uppercase; margin: 8px 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(42px, 7vw, 72px); line-height: .9; } .policy-title p { color: #647188; max-width: 680px; margin: 10px 0 0; font-size: 13px; line-height: 1.6; } .policy-body { gap: 13px; display: grid; } .policy-body section { background: #fff; border: 1px solid #dce4ef; border-radius: 12px; padding: 22px 24px; box-shadow: 0 7px 19px #1f31530a; } .policy-body h2 { color: #202d46; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 9px; font-family: Barlow Condensed, sans-serif; font-size: 28px; } .policy-body p { color: #59677e; margin: 0; font-size: 13px; line-height: 1.7; } .policy-body ul { color: #526077; gap: 7px; margin: 14px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.55; display: grid; } .policy-support { background: linear-gradient(135deg, #eff5ff, #fbfdff); border: 1px solid #b9d0ff; border-radius: 13px; justify-content: space-between; align-items: center; gap: 24px; margin-top: 20px; padding: 23px 25px; display: flex; } .policy-support h2 { color: #1f345b; letter-spacing: -.02em; text-transform: uppercase; margin: 6px 0; font-family: Barlow Condensed, sans-serif; font-size: 29px; } .policy-support p { color: #5c6e89; max-width: 510px; margin: 0; font-size: 12px; line-height: 1.55; } .policy-ticket-action { color: #fff; cursor: pointer; letter-spacing: .04em; text-transform: uppercase; background: #286dff; border: 0; border-radius: 8px; flex: none; justify-content: center; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px; font-size: 10px; font-weight: 850; display: inline-flex; } .policy-ticket-action:hover { background: #185bdc; } .policy-ticket-action:active { transform: scale(.97); } @media (max-width: 760px) { .policy-article { padding: 28px 18px 48px; } .policy-article > header { flex-direction: column; align-items: flex-start; margin-bottom: 14px; } .policy-title { margin: 20px 0; } .policy-title h1 { font-size: 48px; } .policy-body section { padding: 18px; } .policy-body h2 { font-size: 25px; } .policy-support { flex-direction: column; align-items: stretch; padding: 19px; } .policy-support h2 { font-size: 26px; } .policy-ticket-action { width: 100%; } } .policy-article .policy-title h1 { color: #f4f8ff; } .policy-article .policy-title p { color: #c9d5e7; } .admin-policy-manager > .admin-two-column { background: #ffffff1a; grid-template-columns: 280px minmax(0, 1fr); gap: 1px; } .admin-policy-list { background: #0e131e; align-content: start; gap: 5px; padding: 18px; display: grid; } .admin-policy-list > div { gap: 4px; margin-bottom: 7px; display: grid; } .admin-policy-list > div strong { color: #fff; font-size: 12px; } .admin-policy-list > p { color: #94a1b5; font-size: 10px; } .admin-policy-list button { color: #9daabe; text-align: left; cursor: pointer; background: none; border: 1px solid #0000; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 8px; width: 100%; padding: 10px; display: grid; } .admin-policy-list button svg { color: #78869b; } .admin-policy-list button span { gap: 3px; display: grid; } .admin-policy-list button strong { color: #dce5f3; font-size: 10px; } .admin-policy-list button small { color: #78869b; font-size: 8px; } .admin-policy-list button:hover, .admin-policy-list button.active { background: #b8ff4314; border-color: #b8ff4361; } .admin-policy-list button.active strong, .admin-policy-list button.active svg { color: #b8ff43; } .admin-policy-editor { background: #121723; align-content: start; gap: 14px; padding: 21px; display: grid; } .admin-policy-editor-head { border-bottom: 1px solid #ffffff1a; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; display: flex; } .admin-policy-editor-head h3 { color: #fff; letter-spacing: -.03em; text-transform: uppercase; margin: 4px 0; font-family: Barlow Condensed, sans-serif; font-size: 31px; } .admin-policy-editor-head small { color: #8996aa; font-size: 9px; } .admin-policy-editor label { color: #b8c3d4; letter-spacing: .07em; text-transform: uppercase; gap: 7px; font-size: 9px; font-weight: 800; display: grid; } .admin-policy-editor input, .admin-policy-editor textarea { color: #fff; background: #0d111a; border: 1px solid #ffffff2b; outline: 0; width: 100%; padding: 11px; font: 11px / 1.6 Nunito Sans, sans-serif; } .admin-policy-editor textarea { resize: vertical; min-height: 370px; } .admin-policy-editor input:focus, .admin-policy-editor textarea:focus { border-color: #b8ff43; } .admin-policy-editor label > small { color: #718096; letter-spacing: 0; text-align: right; text-transform: none; font-size: 8px; font-weight: 700; } @media (max-width: 680px) { .admin-policy-manager > .admin-two-column { grid-template-columns: 1fr; } .admin-policy-list { max-height: 280px; overflow: auto; } .admin-policy-editor { padding: 16px; } .admin-policy-editor-head { display: grid; } .admin-policy-editor textarea { min-height: 300px; } } .user-dashboard-v2 { color: #182238; background: #f5f7fb; } .user-dashboard-v2 .user-dashboard-topbar { background: #fff; border-bottom: 1px solid #e3e8f1; } .user-dashboard-v2 .user-brand { color: #182238; } .user-dashboard-v2 .user-dashboard-topbar > div > a { color: #63718a; } .user-dashboard-v2 .user-dashboard-topbar > div > button { color: #3a465a; border-color: #dce3ee; } .user-dashboard-v2 .user-dashboard-shell { gap: 18px; max-width: 1500px; padding: 18px; } .user-dashboard-v2 .user-sidebar { background: #fff; border: 1px solid #e2e8f0; flex: none; width: 236px; box-shadow: 0 5px 22px #2335510d; } .user-dashboard-v2 .user-profile-chip { border-bottom: 1px solid #e6ebf2; } .user-dashboard-v2 .user-profile-chip > span { color: #fff; background: linear-gradient(135deg, #286dff, #20bfe6); } .user-dashboard-v2 .user-profile-chip strong { color: #202b40; font-size: 13px; } .user-dashboard-v2 .user-profile-chip small { color: #7b879a; font-size: 10px; } .user-dashboard-v2 .user-sidebar nav { padding: 11px; } .user-dashboard-v2 .user-sidebar nav button { color: #536176; border-radius: 10px; font-size: 11px; font-weight: 700; } .user-dashboard-v2 .user-sidebar nav button.active { color: #245ed6; box-shadow: none; background: linear-gradient(90deg, #e7f2ff, #e7ebff); } .user-dashboard-v2 .user-sidebar-note { color: #71809a; background: #f7fbff; border: 1px solid #dbe6f5; margin: 11px; font-size: 9px; } .user-dashboard-v2 main { min-width: 0; } .user-dashboard-welcome { justify-content: space-between; align-items: flex-end; gap: 22px; padding: 15px 4px 22px; display: flex; } .user-dashboard-welcome > div:first-child > span, .user-quick-actions > span { color: #286dff; letter-spacing: .12em; text-transform: uppercase; font-size: 9px; font-weight: 800; } .user-dashboard-welcome h1 { color: #1a2540; letter-spacing: -.045em; margin: 8px 0 6px; font-family: Nunito Sans, sans-serif; font-size: clamp(26px, 3vw, 37px); font-weight: 750; line-height: 1.1; } .user-dashboard-welcome h1 em { color: #286dff; font-style: normal; } .user-dashboard-welcome p { color: #6b7890; max-width: 590px; margin: 0; font-size: 12px; line-height: 1.55; } .user-welcome-actions { flex-wrap: wrap; gap: 8px; display: flex; } .user-dashboard-v2 .user-primary-action, .user-dashboard-v2 .user-secondary-action { border-radius: 8px; min-height: 38px; font-size: 10px; } .user-dashboard-v2 .user-primary-action { color: #fff; background: #286dff; } .user-dashboard-v2 .user-secondary-action { color: #40506a; background: #fff; border-color: #d6deeb; } .user-balance-row { grid-template-columns: 2fr repeat(3, minmax(120px, 1fr)); gap: 12px; display: grid; } .user-balance-row > article { background: #fff; border: 1px solid #e2e8f0; border-radius: 15px; align-content: center; min-height: 136px; padding: 21px; display: grid; box-shadow: 0 5px 18px #1d2e4f0d; } .user-balance-row > article:not(.user-wallet-highlight) { gap: 5px; } .user-balance-row > article:not(.user-wallet-highlight) > svg { color: #286dff; margin-bottom: 8px; } .user-balance-row > article:not(.user-wallet-highlight) > article:nth-child(3) > svg { color: #1fac79; } .user-balance-row > article strong { color: #1c2941; letter-spacing: -.05em; font-family: Nunito Sans, sans-serif; font-size: 26px; font-weight: 800; } .user-balance-row > article > span { color: #748198; font-size: 11px; } .user-wallet-highlight { color: #fff; grid-template-columns: 1fr auto; align-items: center; position: relative; overflow: hidden; background: linear-gradient(123deg, #0c4cbb, #286dff 58%, #05b8d9) !important; border: 0 !important; } .user-wallet-highlight:after { content: ""; border: 1px solid #fff3; border-radius: 50%; width: 175px; height: 175px; position: absolute; top: -45px; right: -20px; } .user-wallet-highlight > div { z-index: 1; position: relative; } .user-wallet-highlight span { color: #c9e1ff; letter-spacing: .11em; font-size: 9px; font-weight: 800; } .user-wallet-highlight strong { margin: 7px 0 13px; display: block; color: #fff !important; font-size: 35px !important; } .user-wallet-highlight button { color: #1d5ce3; cursor: pointer; background: #fff; border: 0; border-radius: 8px; align-items: center; gap: 7px; padding: 9px 11px; font-size: 10px; font-weight: 800; display: inline-flex; } .user-wallet-highlight > svg { z-index: 1; color: #c4f5ff; position: relative; } .user-dashboard-content-grid { grid-template-columns: minmax(0, 1.6fr) minmax(260px, .7fr); gap: 13px; margin-top: 14px; display: grid; } .user-dashboard-v2 .user-panel, .user-dashboard-v2 .user-quick-actions { background: #fff; border: 1px solid #e0e7f1; border-radius: 15px; box-shadow: 0 5px 18px #1d2e4f0b; } .user-dashboard-v2 .user-panel-heading { border-bottom: 1px solid #edf0f5; padding: 20px 20px 14px; } .user-dashboard-v2 .user-panel-heading span, .user-dashboard-v2 .user-wallet-section-heading span, .user-dashboard-v2 .user-kicker { color: #286dff; font-size: 9px; } .user-dashboard-v2 .user-panel-heading h2 { color: #202b40; font-size: 27px; line-height: 1.05; } .user-dashboard-v2 .user-panel-heading p { color: #6a7890; font-size: 11px; } .user-dashboard-v2 .user-panel-heading > svg { color: #286dff; } .user-dashboard-v2 .user-panel-heading > button { color: #286dff; font-size: 10px; } .user-dashboard-v2 .user-order-table { padding: 0 20px 7px; } .user-dashboard-v2 .user-order-row strong, .user-dashboard-v2 .user-wallet-list strong { color: #26334b; font-size: 11px; } .user-dashboard-v2 .user-order-row p, .user-dashboard-v2 .user-wallet-list p { color: #78849a; } .user-dashboard-v2 .user-order-row b, .user-dashboard-v2 .user-wallet-list b { color: #26334b; font-size: 18px; } .user-quick-actions { align-content: start; gap: 8px; padding: 20px; display: grid; } .user-quick-actions h2 { color: #202b40; letter-spacing: -.04em; margin: 0 0 8px; font-family: Nunito Sans, sans-serif; font-size: 21px; } .user-quick-actions button { color: #45536b; cursor: pointer; text-align: left; background: #fbfcff; border: 1px solid #e5eaf2; border-radius: 9px; align-items: center; gap: 8px; min-height: 39px; padding: 0 10px; font-size: 10px; font-weight: 800; display: flex; } .user-quick-actions button svg:last-child { color: #286dff; margin-left: auto; } .user-quick-actions button:hover { color: #286dff; border-color: #bcd0f7; } .user-account-status-strip { color: #466258; background: #f5fffa; border: 1px solid #cde2dc; border-radius: 12px; align-items: center; gap: 10px; margin-top: 14px; padding: 13px 17px; display: flex; } .user-account-status-strip > svg { color: #159567; } .user-account-status-strip div { gap: 2px; display: grid; } .user-account-status-strip strong { font-size: 10px; } .user-account-status-strip span { color: #6e837a; font-size: 10px; } .user-account-status-strip button { color: #4b625b; cursor: pointer; background: none; border: 0; align-items: center; gap: 5px; margin-left: auto; font-size: 10px; font-weight: 800; display: inline-flex; } .user-dashboard-v2 .user-empty-state h3 { color: #26334b; font-size: 20px; } .user-categories-panel, .user-dashboard-v2 .user-panel { overflow: hidden; } .user-category-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 20px; display: grid; } .user-category-link { color: #26334b; background: linear-gradient(160deg, #fff, #f7f9ff); border: 1px solid #e1e8f2; border-radius: 11px; align-content: start; gap: 7px; min-height: 116px; padding: 15px; text-decoration: none; display: grid; position: relative; } .user-category-link span { color: #25334d; font-family: Nunito Sans, sans-serif; font-size: 14px; font-weight: 800; } .user-category-link small { color: #718098; font-size: 10px; line-height: 1.45; } .user-category-link svg { color: #286dff; position: absolute; bottom: 12px; right: 13px; } .user-category-link:hover { border-color: #aec7f7; transform: translateY(-1px); } .user-referral-card { background: #fffcf1; border: 1px solid #ffe4a3; border-radius: 12px; align-items: flex-start; gap: 13px; margin: 20px; padding: 20px; display: flex; } .user-referral-card > svg { color: #e49a05; } .user-referral-card strong { color: #634b15; font-size: 13px; } .user-referral-card p { color: #847045; margin: 6px 0 0; font-size: 11px; line-height: 1.55; } .user-dashboard-v2 .user-panel > .user-secondary-action { margin: 0 20px 20px; } .user-account-settings-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 20px; display: grid; } .user-account-settings-grid button { color: #47556d; cursor: pointer; text-align: left; background: #fff; border: 1px solid #e1e8f2; border-radius: 11px; grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: center; gap: 9px; min-height: 74px; padding: 12px; display: grid; } .user-account-settings-grid button > svg:first-child { color: #286dff; } .user-account-settings-grid span { gap: 3px; display: grid; } .user-account-settings-grid strong { color: #26334b; font-size: 11px; } .user-account-settings-grid small { color: #748198; font-size: 9px; line-height: 1.4; } .user-account-settings-grid button:hover { background: #f8fbff; border-color: #abc7fa; } .user-dashboard-v2 .user-wallet-feature > div { background: #f8fbff; } .user-dashboard-v2 .user-wallet-feature strong, .user-dashboard-v2 .user-wallet-feature h3 { color: #20314d; } .user-dashboard-v2 .user-wallet-feature p, .user-dashboard-v2 .user-wallet-list small, .user-dashboard-v2 .user-muted { color: #6f7d93; } .user-dashboard-v2 .user-settings-grid, .user-dashboard-v2 .user-settings-grid > article, .user-dashboard-v2 .user-settings-grid > form { background: #fff; } .user-dashboard-v2 .user-settings-grid h3 { color: #24324a; font-size: 27px; } .user-dashboard-v2 .user-settings-grid p { color: #6d7c92; } .user-dashboard-v2 .user-notification-preferences, .user-dashboard-v2 .user-security-grid article, .user-dashboard-v2 .user-support-form { color: #45536a; background: #fff; border-color: #e1e8f2; } @media (max-width: 980px) { .user-dashboard-v2 .user-sidebar { width: 210px; } .user-balance-row { grid-template-columns: 1.8fr repeat(3, minmax(105px, 1fr)); } .user-dashboard-content-grid { grid-template-columns: 1fr; } .user-quick-actions { grid-template-columns: 1fr 1fr; } .user-quick-actions > span, .user-quick-actions h2 { grid-column: 1 / -1; } } @media (max-width: 760px) { .user-dashboard-v2 { padding-bottom: 73px; } .user-dashboard-v2 .user-dashboard-shell { padding: 13px; } .user-dashboard-v2 .user-sidebar { display: none; } .user-dashboard-welcome { flex-direction: column; align-items: start; padding: 5px 2px 16px; } .user-dashboard-welcome h1 { font-size: 28px; } .user-dashboard-welcome p { font-size: 11px; } .user-balance-row { grid-template-columns: 1fr 1fr; gap: 9px; } .user-balance-row > article { border-radius: 12px; min-height: 104px; padding: 14px; } .user-wallet-highlight { grid-column: 1 / -1; min-height: 142px !important; } .user-wallet-highlight strong { font-size: 31px !important; } .user-balance-row > article strong { font-size: 22px; } .user-dashboard-content-grid { margin-top: 10px; } .user-dashboard-v2 .user-panel-heading { padding: 16px 15px 12px; } .user-dashboard-v2 .user-panel-heading h2 { font-size: 23px; } .user-dashboard-v2 .user-order-table, .user-category-grid, .user-account-settings-grid { padding: 14px; } .user-category-grid { grid-template-columns: 1fr 1fr; } .user-account-settings-grid { grid-template-columns: 1fr; } .user-quick-actions { grid-template-columns: 1fr; padding: 15px; } .user-quick-actions > span, .user-quick-actions h2 { grid-column: auto; } .user-account-status-strip { align-items: flex-start; } .user-account-status-strip button { margin-left: 0; } .user-dashboard-v2 .user-mobile-nav { grid-template-columns: repeat(5, 1fr); display: grid; overflow-x: auto; } .user-dashboard-v2 .user-mobile-nav button { min-width: 64px; font-size: 8px; } } .user-dashboard-v2 .user-dashboard-welcome h1 { color: #f6f8fc; } .user-dashboard-v2 .user-dashboard-welcome h1 em { color: #8db5ff; } .user-dashboard-v2 .user-dashboard-welcome p { color: #c1cad8; } .user-dashboard-v2 { background-color: #172369; background-image: linear-gradient(135deg, #0a2062f7 0%, #2635a4f2 48%, #5328b2f5 100%), linear-gradient(#b2c7ff17 1px, #0000 1px), linear-gradient(90deg, #b2c7ff17 1px, #0000 1px); background-size: 100% 100%, 46px 46px, 46px 46px; } .user-dashboard-v2 .user-dashboard-topbar { background: #0b123ed1; border-bottom-color: #bfcfff2e; } .user-dashboard-v2 .user-brand, .user-dashboard-v2 .user-dashboard-topbar > div > a, .user-dashboard-v2 .user-dashboard-topbar > div > button { color: #f6f8ff; } .user-dashboard-v2 .user-dashboard-topbar > div > button { background: #ffffff0f; border-color: #cad7ff47; } .user-dashboard-v2 .user-sidebar, .user-dashboard-v2 .user-panel, .user-dashboard-v2 .user-quick-actions, .user-dashboard-v2 .user-balance-row > article:not(.user-wallet-highlight) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: #0c1444b8; border-color: #c6d5ff33; box-shadow: 0 14px 34px #080b3838; } .user-dashboard-v2 .user-profile-chip { border-bottom-color: #c6d5ff2b; } .user-dashboard-v2 .user-profile-chip > span { background: linear-gradient(135deg, #4cc7ff, #7b5cff); } .user-dashboard-v2 .user-profile-chip strong, .user-dashboard-v2 .user-sidebar nav button.active, .user-dashboard-v2 .user-panel-heading h2, .user-dashboard-v2 .user-order-row strong, .user-dashboard-v2 .user-wallet-list strong, .user-dashboard-v2 .user-balance-row > article strong, .user-dashboard-v2 .user-quick-actions h2, .user-dashboard-v2 .user-category-link span, .user-dashboard-v2 .user-account-settings-grid strong { color: #f5f7ff; } .user-dashboard-v2 .user-profile-chip small, .user-dashboard-v2 .user-sidebar nav button, .user-dashboard-v2 .user-sidebar-note, .user-dashboard-v2 .user-panel-heading p, .user-dashboard-v2 .user-order-row p, .user-dashboard-v2 .user-wallet-list p, .user-dashboard-v2 .user-balance-row > article > span, .user-dashboard-v2 .user-category-link small, .user-dashboard-v2 .user-account-settings-grid small { color: #c5cfee; } .user-dashboard-v2 .user-sidebar nav button:hover { color: #fff; background: #8f81ff2e; } .user-dashboard-v2 .user-sidebar nav button.active { background: linear-gradient(90deg, #5b97ff5c, #804bec61); } .user-dashboard-v2 .user-sidebar-note { background: #5975d121; border-color: #93aeff38; } .user-dashboard-v2 .user-wallet-highlight { background: linear-gradient(125deg, #0d5ec5 0%, #2c69e8 45%, #7534c5 100%) !important; } .user-dashboard-v2 .user-wallet-highlight button { color: #3150bf; } .user-dashboard-v2 .user-panel-heading { border-bottom-color: #c6d5ff26; } .user-dashboard-v2 .user-panel-heading span, .user-dashboard-v2 .user-wallet-section-heading span, .user-dashboard-v2 .user-kicker, .user-dashboard-v2 .user-dashboard-welcome > div:first-child > span, .user-dashboard-v2 .user-quick-actions > span { color: #b7eaff; } .user-dashboard-v2 .user-panel-heading > svg, .user-dashboard-v2 .user-panel-heading > button, .user-dashboard-v2 .user-quick-actions button svg:last-child, .user-dashboard-v2 .user-category-link svg, .user-dashboard-v2 .user-account-settings-grid button > svg:first-child { color: #90b7ff; } .user-dashboard-v2 .user-order-row { border-color: #c6d5ff21; } .user-dashboard-v2 .user-status { color: #d6e4ff; background: #598aff33; } .user-dashboard-v2 .user-quick-actions button, .user-dashboard-v2 .user-category-link, .user-dashboard-v2 .user-account-settings-grid button { color: #dce5ff; background: #ffffff0e; border-color: #c6d5ff2e; } .user-dashboard-v2 .user-quick-actions button:hover, .user-dashboard-v2 .user-category-link:hover, .user-dashboard-v2 .user-account-settings-grid button:hover { background: #7e6ae72b; border-color: #a4c1ffb3; } .user-dashboard-v2 .user-account-status-strip { color: #e7f4ff; background: #4487d029; border-color: #99d2ff52; } .user-dashboard-v2 .user-account-status-strip > svg { color: #9ce8ff; } .user-dashboard-v2 .user-account-status-strip span, .user-dashboard-v2 .user-account-status-strip button { color: #c6ddff; } .user-dashboard-v2 .user-empty-state { color: #cbd5ef; background: #ffffff0e; border-color: #c6d5ff2b; } .user-dashboard-v2 .user-empty-state h3 { color: #f4f7ff; } .user-dashboard-v2 .user-empty-mark { color: #c5d8ff; background: #7888ff33; } .user-dashboard-v2 .user-referral-card { background: #7f4cd633; border-color: #be9fff66; } .user-dashboard-v2 .user-referral-card > svg { color: #d9c0ff; } .user-dashboard-v2 .user-referral-card strong { color: #f2eaff; } .user-dashboard-v2 .user-referral-card p { color: #d5c9ed; } .user-dashboard-v2 .user-wallet-feature { background: #c6d5ff26; } .user-dashboard-v2 .user-wallet-feature > div, .user-dashboard-v2 .user-settings-grid, .user-dashboard-v2 .user-settings-grid > article, .user-dashboard-v2 .user-settings-grid > form, .user-dashboard-v2 .user-notification-preferences, .user-dashboard-v2 .user-security-grid article, .user-dashboard-v2 .user-support-form { color: #e3eaff; background: #0c1444b8; border-color: #c6d5ff2e; } .user-dashboard-v2 .user-wallet-feature strong, .user-dashboard-v2 .user-wallet-feature h3, .user-dashboard-v2 .user-settings-grid h3 { color: #f5f7ff; } .user-dashboard-v2 .user-wallet-feature p, .user-dashboard-v2 .user-wallet-list small, .user-dashboard-v2 .user-muted, .user-dashboard-v2 .user-settings-grid p { color: #c1cce9; } .user-dashboard-v2 .user-topup-form, .user-dashboard-v2 .user-wallet-section { border-color: #c6d5ff29; } .user-dashboard-v2 .user-topup-form label, .user-dashboard-v2 .user-settings-grid label { color: #dbe4ff; } .user-dashboard-v2 .user-topup-form input, .user-dashboard-v2 .user-topup-form select, .user-dashboard-v2 .user-settings-grid input, .user-dashboard-v2 .user-settings-grid select, .user-dashboard-v2 .user-support-form input, .user-dashboard-v2 .user-support-form select, .user-dashboard-v2 .user-support-form textarea { color: #f3f6ff; background: #03092d85; border-color: #c6d5ff42; } .user-dashboard-v2 .user-privacy-actions button { color: #e2e9ff; background: #ffffff0f; border-color: #c6d5ff3d; } .user-dashboard-v2 .user-mobile-nav { background: #0b123ef5; border-color: #c6d5ff33; } .user-dashboard-v2 .user-mobile-nav button { color: #c3ceed; } .user-dashboard-v2 .user-mobile-nav button.active { color: #b7eaff; } .category-mega-panel { display: none; } .compact-category-menu:hover > .category-mega-panel, .compact-category-menu:focus-within > .category-mega-panel, .category-mega-panel[data-open="true"] { display: block; } .info-help-result-count { color: #627087; margin: -5px 0 18px; font-size: 11px; font-weight: 800; } .info-help-sections { gap: 16px; display: grid; } .info-help-section { background: #fff; border: 1px solid #dce3ee; grid-template-columns: minmax(190px, .42fr) minmax(0, 1fr); gap: 20px; padding: 22px; display: grid; } .info-help-section > div:first-child > span, .info-help-escalation span { color: var(--blue); letter-spacing: .12em; font-size: 9px; font-weight: 900; } .info-help-section h2, .info-help-escalation h2 { color: #111724; letter-spacing: -.025em; text-transform: uppercase; margin: 8px 0; font-family: Barlow Condensed, sans-serif; font-size: 31px; } .info-help-section p, .info-help-escalation p { color: #58657a; margin: 0; font-size: 12px; line-height: 1.65; } .info-help-escalation { color: #fff; background: #111725; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 20px; padding: 25px; display: grid; } .info-help-escalation h2 { color: #fff; } .info-help-escalation p { color: #c0c8d8; } .info-help-escalation .info-cta-row { justify-content: flex-end; margin: 0; } .info-help-escalation .info-secondary-action { color: #fff; border-color: #ffffff42; } @media (max-width: 760px) { .info-help-section, .info-help-escalation { grid-template-columns: 1fr; gap: 17px; } .info-help-escalation .info-cta-row { justify-content: flex-start; } } .compact-product-text-visual { color: #fff; text-align: left; background: linear-gradient(135deg, #12182a 0%, #243970 68%, #10121a 100%); align-content: end; gap: 3px; padding: 17px 12px 12px; display: grid; position: absolute; inset: 0; } .compact-product-text-visual:after { content: ""; opacity: .4; pointer-events: none; background-color: #0000; background-image: linear-gradient(90deg, #b8ff431f 1px, #0000 1px), linear-gradient(#b8ff4317 1px, #0000 1px); background-position: 0 0, 0 0; background-repeat: repeat, repeat; background-size: 18px 18px; background-attachment: scroll, scroll; background-origin: padding-box, padding-box; background-clip: border-box, border-box; position: absolute; inset: 0; } .compact-product-text-visual > * { z-index: 1; position: relative; } .compact-product-text-visual small { color: var(--lime); letter-spacing: .09em; text-transform: uppercase; font-size: 8px; font-weight: 800; } .compact-product-text-visual strong { letter-spacing: -.02em; text-transform: uppercase; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-family: Barlow Condensed, sans-serif; font-size: 24px; font-weight: 700; line-height: .88; display: -webkit-box; overflow: hidden; } .compact-product-text-visual span { color: #d7e0f4; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 700; overflow: hidden; } .compact-product-offer { color: #25375c; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; margin-top: 4px; font-size: 11px; font-weight: 800; display: block; overflow: hidden; } .compact-product-copy p { margin-bottom: 4px; } .compact-product-region { margin-top: 5px; } .family-selection-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 18px; display: grid; } .family-denomination-area { min-width: 0; } .family-requirement-bar { color: #1d4fbc; letter-spacing: .06em; text-transform: uppercase; background: #eaf0ff; border: 1px solid #b7c8ed; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 12px 14px; font-size: 10px; font-weight: 800; display: flex; } .family-requirement-bar b { color: #24365d; background: #fff; border: 1px solid #94abe0; border-radius: 999px; padding: 5px 8px; font-size: 9px; } .family-denomination-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; display: grid; } .family-denomination-card { min-height: 112px; color: var(--ink); cursor: pointer; text-align: left; background: #fff; border: 1px solid #d7deeb; align-content: space-between; gap: 9px; padding: 15px; transition: transform .18s, border-color .18s, box-shadow .18s, background .18s; display: grid; } .family-denomination-card:hover { border-color: #89a8ef; transform: translateY(-2px); box-shadow: 0 10px 18px #286dff17; } .family-denomination-card.selected { background: #fffaf0; border: 2px solid #f0a51e; box-shadow: 0 9px 20px #f0a51e29; } .family-denomination-card > span { letter-spacing: -.02em; text-transform: uppercase; font-family: Barlow Condensed, sans-serif; font-size: 24px; font-weight: 700; line-height: .9; } .family-denomination-card strong { letter-spacing: -.03em; font-family: Barlow Condensed, sans-serif; font-size: 30px; line-height: .85; } .family-denomination-card small { color: #67758b; letter-spacing: .04em; text-transform: uppercase; font-size: 8px; font-weight: 800; } .family-selection-summary { color: #fff; background: #151a25; border: 1px solid #d9cfb8; gap: 12px; padding: 19px; display: grid; position: sticky; top: 18px; box-shadow: 0 15px 30px #10121a24; } .family-selection-summary .detail-eyebrow { color: #ffd166; } .family-selection-summary h3 { letter-spacing: -.035em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: 36px; line-height: .85; } .family-selection-summary > p:not(.detail-eyebrow) { color: #cbd4e6; margin: 0; font-size: 12px; font-weight: 700; } .selection-required-fields { gap: 9px; display: grid; } .selection-required-fields label { color: #dce4f4; letter-spacing: .05em; text-transform: uppercase; gap: 5px; font-size: 9px; font-weight: 800; display: grid; } .selection-required-fields input { color: #fff; background: #252c3b; border: 1px solid #ffffff29; outline: 0; height: 39px; padding: 0 10px; font-size: 12px; } .selection-required-fields input:focus { border-color: var(--lime); } .selection-price { border-top: 1px solid #ffffff24; border-bottom: 1px solid #ffffff24; gap: 3px; padding: 13px 0; display: grid; } .selection-price span, .selection-price small { color: #aeb9cc; letter-spacing: .08em; text-transform: uppercase; font-size: 9px; font-weight: 800; } .selection-price strong { color: #ffd166; letter-spacing: -.04em; font-family: Barlow Condensed, sans-serif; font-size: 42px; line-height: .85; } .family-selection-summary > button { color: #10121a; cursor: pointer; background: linear-gradient(90deg, #f7ba38, #f19a18); border: 0; justify-content: center; justify-self: start; align-items: center; width: 52px; min-height: 46px; font-size: 0; transition: filter .18s, transform .18s; display: flex; } .family-selection-summary > button:hover { filter: brightness(1.08); transform: translateY(-1px); } .family-selection-summary > button span { display: none; } .selection-note { color: #aeb9cc; font-size: 9px; line-height: 1.45; } @media (max-width: 900px) { .family-selection-layout { grid-template-columns: 1fr; } .family-selection-summary { grid-template-columns: 1fr auto; align-items: center; position: static; } .family-selection-summary h3, .family-selection-summary > p:not(.detail-eyebrow), .selection-required-fields { grid-column: 1 / -1; } .selection-price { border-bottom: 0; } .family-selection-summary > button { width: 52px; min-height: 52px; } .family-selection-summary > button span { display: none; } } @media (max-width: 640px) { .family-denomination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .family-denomination-card { min-height: 104px; padding: 12px; } .family-denomination-card > span { font-size: 22px; } .family-denomination-card strong { font-size: 27px; } .family-selection-summary { padding: 16px; display: grid; } .family-selection-summary > button { width: 52px; } .family-selection-summary > button span { display: none; } } .selected-browser-list-head { font-size: 9px; } .selected-browser-row-main { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 11px; padding: 9px; } .selected-browser-art { width: 46px; height: 46px; font-size: 18px; } .selected-browser-row-copy { gap: 3px; } .selected-browser-row-copy strong { font-size: 13px; line-height: 1.25; } .selected-browser-row-copy small { font-size: 10px; line-height: 1.35; } .selected-browser-row-price { font-size: 13px; } .selected-browser-preview { min-height: 0; } .selected-preview-art { height: 188px; } .selected-preview-copy { gap: 7px; padding: 17px 18px 12px; } .selected-preview-copy h3 { letter-spacing: -.02em; font-size: 21px; line-height: 1.2; } .selected-preview-copy strong { font-size: 13px; line-height: 1.35; } .selected-preview-copy > span { font-size: 11px; line-height: 1.4; } .selected-preview-price { padding: 14px 18px; } .selected-preview-price strong { font-size: 25px; line-height: 1.1; } .selected-preview-actions { padding: 0 18px 18px; } .selected-preview-actions button { min-height: 42px; font-size: 11px; } .family-detail-summary h1 { letter-spacing: -.04em; font-size: clamp(34px, 4.5vw, 56px); line-height: 1.02; } .family-detail-summary > p { font-size: 14px; line-height: 1.6; } .family-detail-summary > div { font-size: 9px; line-height: 1.4; } .family-services-heading h2 { letter-spacing: -.04em; font-size: clamp(30px, 3.6vw, 48px); line-height: 1; } .family-services-heading > p { font-size: 13px; line-height: 1.65; } .family-service-row { padding: 16px 18px; } .family-service-name h3 { letter-spacing: -.02em; font-size: 23px; line-height: 1.08; } .family-service-name > p { font-size: 12px; line-height: 1.55; } .family-service-price strong { font-size: 25px; line-height: 1.08; } .family-service-price small { font-size: 9px; } .family-service-row > button { font-size: 11px; } .family-requirement-bar { font-size: 9px; line-height: 1.35; } .family-requirement-bar b { font-size: 9px; } .family-denomination-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 11px; } .family-denomination-card { gap: 8px; min-height: 100px; padding: 14px; } .family-denomination-card > span { letter-spacing: -.01em; font-size: 16px; line-height: 1.2; } .family-denomination-card strong { letter-spacing: -.02em; font-size: 21px; line-height: 1.1; } .family-denomination-card small { font-size: 9px; line-height: 1.35; } .family-selection-summary { gap: 13px; padding: 20px; } .family-selection-summary h3 { letter-spacing: -.02em; font-size: 25px; line-height: 1.15; } .family-selection-summary > p:not(.detail-eyebrow) { font-size: 13px; line-height: 1.45; } .selection-required-fields label { font-size: 10px; } .selection-required-fields input { font-size: 13px; } .selection-price strong { letter-spacing: -.03em; font-size: 31px; line-height: 1.08; } .selection-note { font-size: 10px; line-height: 1.5; } @media (max-width: 760px) { .selected-browser-row-main { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 8px; } .selected-browser-art { width: 42px; height: 42px; } .selected-preview-art { height: 170px; } .selected-preview-copy { padding: 15px 16px 11px; } .selected-preview-copy h3 { font-size: 19px; } .selected-preview-price { padding: 12px 16px; } .selected-preview-actions { padding: 0 16px 16px; } .family-detail-summary h1 { font-size: clamp(32px, 10vw, 42px); } .family-services-heading h2 { font-size: 34px; } .family-denomination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .family-denomination-card { min-height: 96px; padding: 12px; } .family-denomination-card > span { font-size: 15px; } .family-denomination-card strong { font-size: 19px; } } .compact-product-text-visual strong, .compact-product-offer, .family-detail-summary h1, .family-services-heading h2, .family-service-name h3, .family-denomination-card > span, .family-denomination-card small, .family-selection-summary h3, .family-requirement-bar, .selection-required-fields label, .selection-price span, .selection-price small { text-transform: none; } .user-dashboard { color: #f4f6fb; background: #0c0f18; min-height: 100vh; } .user-dashboard-topbar { background: #10131d; border-bottom: 1px solid #ffffff1a; justify-content: space-between; align-items: center; gap: 20px; min-height: 72px; padding: 0 clamp(18px, 4vw, 64px); display: flex; } .user-brand { color: #fff; letter-spacing: -.045em; align-items: center; font-family: Barlow Condensed, sans-serif; font-size: 28px; font-weight: 800; text-decoration: none; display: inline-flex; } .user-brand span { color: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); background: #286dff; place-items: center; width: 23px; height: 23px; margin-right: 6px; font-size: 13px; display: grid; } .user-brand em { color: #b8ff43; font-style: normal; } .user-dashboard-topbar > div { align-items: center; gap: 18px; display: flex; } .user-dashboard-topbar > div a, .user-dashboard-topbar > div button { color: #cdd5e6; cursor: pointer; letter-spacing: .04em; text-transform: uppercase; background: none; border: 0; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-decoration: none; display: inline-flex; } .user-dashboard-topbar > div a:hover, .user-dashboard-topbar > div button:hover { color: #b8ff43; } .user-dashboard-shell { grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 72px); display: grid; } .user-sidebar { background: #0f121c; border-right: 1px solid #ffffff1a; flex-direction: column; padding: 26px 16px; display: flex; } .user-profile-chip { border-bottom: 1px solid #ffffff1a; align-items: center; gap: 10px; padding: 0 8px 23px; display: flex; } .user-profile-chip > span { color: #fff; background: linear-gradient(135deg, #286dff, #9a44ff); flex: none; place-items: center; width: 37px; height: 37px; font-family: Barlow Condensed, sans-serif; font-size: 21px; font-weight: 800; display: grid; } .user-profile-chip strong, .user-profile-chip small { text-overflow: ellipsis; white-space: nowrap; display: block; overflow: hidden; } .user-profile-chip strong { max-width: 158px; font-size: 13px; } .user-profile-chip small { color: #8792a9; max-width: 158px; margin-top: 3px; font-size: 10px; } .user-sidebar nav { gap: 5px; padding: 20px 0; display: grid; } .user-sidebar nav button { color: #aab4c9; cursor: pointer; letter-spacing: .04em; text-align: left; text-transform: uppercase; background: none; border: 1px solid #0000; align-items: center; gap: 10px; min-height: 41px; padding: 0 10px; font-size: 11px; font-weight: 800; transition: background .18s, color .18s, border-color .18s; display: flex; } .user-sidebar nav button:hover { color: #fff; background: #ffffff0d; } .user-sidebar nav button.active { color: #b8ff43; background: #b8ff431a; border-color: #b8ff434d; } .user-sidebar-note { color: #8490a7; border: 1px solid #ffffff1a; gap: 8px; margin-top: auto; padding: 12px 9px; font-size: 10px; line-height: 1.45; display: flex; } .user-sidebar-note svg { color: #b8ff43; flex: none; } .user-dashboard-shell > main { min-width: 0; padding: clamp(20px, 4vw, 56px); } .user-hero { background: radial-gradient(circle at 82% 15%, #9d44ff75, #0000 38%), linear-gradient(125deg, #101a3f, #111422 57%, #192052); grid-template-columns: minmax(0, 1.05fr) minmax(280px, .8fr); min-height: 305px; display: grid; overflow: hidden; box-shadow: 0 20px 44px #00000040; } .user-hero > div:first-child { z-index: 1; padding: clamp(26px, 5vw, 58px); position: relative; } .user-hero span, .user-panel-heading span, .user-kicker { color: #b8ff43; letter-spacing: .15em; text-transform: uppercase; font-size: 9px; font-weight: 800; display: block; } .user-hero h1 { letter-spacing: -.065em; text-transform: uppercase; max-width: 540px; margin: 12px 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(58px, 6.4vw, 100px); font-weight: 800; line-height: .76; } .user-hero h1 em { color: #b8ff43; font-style: normal; } .user-hero p { color: #c8d1e3; max-width: 460px; margin: 0 0 21px; font-size: 13px; line-height: 1.55; } .user-primary-action, .user-secondary-action { color: #10131d; cursor: pointer; letter-spacing: .07em; text-transform: uppercase; background: #b8ff43; border: 0; justify-content: center; align-items: center; gap: 8px; min-height: 42px; font-size: 10px; font-weight: 900; text-decoration: none; transition: transform .16s, background .16s; display: inline-flex; } .user-primary-action { padding: 0 16px; } .user-primary-action:hover, .user-secondary-action:hover { background: #fff; transform: translateY(-1px); } .user-primary-action:active, .user-secondary-action:active { transform: scale(.97); } .user-hero-grid { grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 28px; display: grid; transform: skewX(-9deg); } .user-hero-grid b { color: #ffffffbf; letter-spacing: -.06em; background: #080c1742; border: 1px solid #b8ff4359; place-items: center; font-family: Barlow Condensed, sans-serif; font-size: clamp(32px, 4vw, 60px); display: grid; } .user-hero-grid b:nth-child(2), .user-hero-grid b:nth-child(5) { color: #b8ff43; } .user-stat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; display: grid; } .user-stat-grid article { background: #131825; border: 1px solid #ffffff1f; justify-content: space-between; align-items: flex-start; min-height: 129px; padding: 20px; display: flex; } .user-stat-grid article svg { color: #80a3ff; } .user-stat-grid article:first-child svg { color: #b8ff43; } .user-stat-grid article:nth-child(3) svg { color: #ff6d91; } .user-stat-grid span, .user-stat-grid small { color: #8c98ad; letter-spacing: .08em; text-transform: uppercase; font-size: 9px; font-weight: 800; display: block; } .user-stat-grid strong { color: #fff; letter-spacing: -.05em; margin: 8px 0 5px; font-family: Barlow Condensed, sans-serif; font-size: clamp(32px, 4vw, 46px); line-height: .85; display: block; } .user-overview-grid { grid-template-columns: minmax(0, 1.45fr) minmax(230px, .55fr); gap: 14px; display: grid; } .user-panel { background: #131825; border: 1px solid #ffffff1f; } .user-panel-heading { border-bottom: 1px solid #ffffff1a; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 21px; display: flex; } .user-panel-heading h2 { color: #fff; letter-spacing: -.045em; text-transform: uppercase; margin: 7px 0 3px; font-family: Barlow Condensed, sans-serif; font-size: 36px; line-height: .85; } .user-panel-heading p { color: #929eb4; max-width: 580px; margin: 7px 0 0; font-size: 11px; line-height: 1.5; } .user-panel-heading > svg { color: #b8ff43; } .user-panel-heading > button { color: #b8ff43; cursor: pointer; text-transform: uppercase; background: none; border: 0; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; display: inline-flex; } .user-account-card { background: linear-gradient(150deg, #286dff, #7642d8); flex-direction: column; justify-content: center; align-items: flex-start; min-height: 250px; padding: 26px; display: flex; } .user-account-card svg { color: #b8ff43; } .user-account-card p { color: #dce7ff; letter-spacing: .12em; margin: 25px 0 5px; font-size: 9px; font-weight: 800; } .user-account-card h2 { letter-spacing: -.05em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: 39px; line-height: .88; } .user-account-card > span { color: #e2e9fa; margin-top: 12px; font-size: 11px; line-height: 1.5; } .user-account-card button { color: #fff; cursor: pointer; text-transform: uppercase; background: #10131d; border: 0; align-items: center; gap: 6px; margin-top: 21px; padding: 10px 12px; font-size: 10px; font-weight: 800; display: inline-flex; } .user-empty-state { text-align: center; align-content: center; place-items: center; min-height: 190px; padding: 28px; display: grid; } .user-empty-mark { color: #b8ff43; border: 1px solid #b8ff4366; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; display: grid; } .user-empty-state h3 { color: #fff; letter-spacing: -.035em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: 28px; } .user-empty-state p { color: #919cb0; max-width: 440px; margin: 7px 0 16px; font-size: 11px; line-height: 1.55; } .user-secondary-action { color: #b8ff43; background: none; border: 1px solid #b8ff438c; min-height: 36px; padding: 0 12px; } .user-order-table { padding: 0 21px; } .user-order-row { border-bottom: 1px solid #ffffff17; grid-template-columns: minmax(130px, 1fr) auto minmax(100px, .6fr) auto; align-items: center; gap: 16px; padding: 16px 0; display: grid; } .user-order-row:last-child { border-bottom: 0; } .user-order-row strong { color: #fff; font-size: 12px; } .user-order-row p, .user-order-row small { color: #8792a8; margin: 4px 0 0; font-size: 10px; } .user-order-row > div:last-of-type { justify-items: end; display: grid; } .user-order-row b { color: #fff; letter-spacing: -.03em; font-family: Barlow Condensed, sans-serif; font-size: 24px; } .user-order-row > svg { color: #8190aa; } .user-status { color: #b9c6db; letter-spacing: .07em; text-transform: uppercase; border: 1px solid #ffffff26; width: max-content; padding: 4px 7px; font-size: 8px; font-weight: 800; display: inline-flex; } .user-status-delivered { color: #b8ff43; border-color: #b8ff4373; } .user-status-failed, .user-status-cancelled { color: #ff849b; border-color: #ff657d73; } .user-status-processing, .user-status-paid { color: #83adff; border-color: #5898ff80; } .user-saved-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 21px; display: grid; } .user-saved-card { background: #0e121d; border: 1px solid #ffffff1f; align-content: start; min-height: 200px; padding: 15px; display: grid; } .user-saved-card-top { justify-content: space-between; align-items: center; gap: 10px; display: flex; } .user-saved-card-top span { color: #80a3ff; letter-spacing: .08em; text-transform: uppercase; font-size: 8px; font-weight: 800; } .user-saved-card-top button { color: #ff6e91; cursor: pointer; background: none; border: 1px solid #ff6e9066; place-items: center; width: 28px; height: 28px; display: grid; } .user-saved-card h3 { color: #fff; letter-spacing: -.04em; text-transform: uppercase; margin: 20px 0 6px; font-family: Barlow Condensed, sans-serif; font-size: 29px; line-height: .88; } .user-saved-card > p { color: #8b96aa; margin: 0; font-size: 10px; line-height: 1.45; } .user-saved-card > div:last-child { justify-content: space-between; align-items: end; gap: 9px; margin-top: auto; padding-top: 16px; display: flex; } .user-saved-card strong { color: #b8ff43; letter-spacing: -.04em; font-family: Barlow Condensed, sans-serif; font-size: 29px; } .user-saved-card a { color: #fff; text-transform: uppercase; align-items: center; gap: 4px; font-size: 9px; font-weight: 800; text-decoration: none; display: inline-flex; } .user-wallet-feature { background: #ffffff1a; grid-template-columns: .8fr 1.2fr; gap: 1px; display: grid; } .user-wallet-feature > div { background: #131825; min-height: 150px; padding: 22px; } .user-wallet-feature p { color: #8d99af; margin: 0; font-size: 10px; line-height: 1.5; } .user-wallet-feature strong { color: #b8ff43; letter-spacing: -.055em; margin: 11px 0; font-family: Barlow Condensed, sans-serif; font-size: 50px; line-height: .82; display: block; } .user-wallet-feature h3 { color: #fff; letter-spacing: -.04em; text-transform: uppercase; margin: 0 0 7px; font-family: Barlow Condensed, sans-serif; font-size: 30px; } .user-wallet-list { padding: 0 21px; } .user-wallet-list article { border-bottom: 1px solid #ffffff17; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 15px 0; display: grid; } .user-entry-icon { color: #ff859b; background: #ffffff14; place-items: center; width: 31px; height: 31px; display: grid; } .user-entry-icon.credit { color: #b8ff43; background: #b8ff431a; } .user-wallet-list strong { color: #fff; text-transform: capitalize; font-size: 12px; } .user-wallet-list p { color: #8e99ad; text-overflow: ellipsis; white-space: nowrap; margin: 3px 0 0; font-size: 10px; overflow: hidden; } .user-wallet-list > article > div:last-child { justify-items: end; gap: 3px; display: grid; } .user-wallet-list b { letter-spacing: -.035em; font-family: Barlow Condensed, sans-serif; font-size: 24px; } .user-wallet-list b.credit { color: #b8ff43; } .user-wallet-list b.debit { color: #ff879c; } .user-wallet-list small { color: #8e99ad; text-transform: uppercase; font-size: 8px; font-weight: 800; } .user-settings-grid { background: #ffffff1a; grid-template-columns: .9fr 1.1fr; gap: 1px; display: grid; } .user-settings-grid > article, .user-settings-grid > form { background: #131825; padding: 24px; } .user-settings-grid h3 { color: #fff; letter-spacing: -.04em; text-transform: uppercase; margin: 12px 0 6px; font-family: Barlow Condensed, sans-serif; font-size: 34px; } .user-settings-grid p { color: #9aa6ba; font-size: 11px; line-height: 1.55; } .user-settings-grid .user-muted { color: #78849b; margin-top: 22px; } .user-settings-grid form { align-content: start; gap: 15px; display: grid; } .user-settings-grid label { color: #b7c1d3; letter-spacing: .07em; text-transform: uppercase; gap: 7px; font-size: 10px; font-weight: 800; display: grid; } .user-settings-grid label span { color: #7b879c; font-weight: 600; } .user-settings-grid select, .user-settings-grid input { color: #fff; background: #0e121d; border: 1px solid #ffffff2e; outline: 0; height: 42px; padding: 0 11px; font-size: 12px; } .user-settings-grid select:focus, .user-settings-grid input:focus { border-color: #b8ff43; } .user-dashboard-loading { color: #fff; text-align: center; background: #0c0f18; place-content: center; gap: 14px; min-height: 100vh; padding: 30px; display: grid; } .user-loader-mark { color: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); background: #286dff; justify-self: center; place-items: center; width: 46px; height: 46px; font-family: Barlow Condensed, sans-serif; font-size: 28px; font-weight: 800; display: grid; } .user-dashboard-loading h1 { letter-spacing: -.04em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: 46px; } .user-dashboard-loading p { color: #aeb9cb; max-width: 410px; margin: 0; font-size: 12px; line-height: 1.55; } .user-dashboard-loading .user-primary-action, .user-dashboard-loading .user-text-link { justify-self: center; } .user-text-link { color: #b8ff43; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; font-weight: 800; text-decoration: none; } @media (max-width: 1000px) { .user-dashboard-shell { grid-template-columns: 1fr; } .user-sidebar { border-bottom: 1px solid #ffffff1a; border-right: 0; padding: 0; } .user-profile-chip, .user-sidebar-note { display: none; } .user-sidebar nav { padding: 9px clamp(16px, 4vw, 30px); display: flex; overflow-x: auto; } .user-sidebar nav button { flex: none; } .user-hero { grid-template-columns: 1fr .62fr; } .user-saved-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .user-dashboard-topbar { min-height: 61px; padding: 0 16px; } .user-dashboard-topbar > div { gap: 10px; } .user-dashboard-topbar > div a { display: none; } .user-dashboard-shell > main { padding: 14px; } .user-sidebar nav { padding: 8px 10px; } .user-sidebar nav button { min-height: 37px; padding: 0 8px; font-size: 9px; } .user-hero { grid-template-columns: 1fr; min-height: 0; } .user-hero > div:first-child { padding: 32px 23px; } .user-hero h1 { font-size: 62px; } .user-hero-grid { min-height: 145px; padding: 13px; } .user-stat-grid { grid-template-columns: 1fr; } .user-stat-grid article { min-height: 100px; } .user-overview-grid, .user-settings-grid, .user-wallet-feature { grid-template-columns: 1fr; } .user-panel-heading { padding: 17px; } .user-panel-heading h2 { font-size: 31px; } .user-order-table, .user-wallet-list { padding: 0 15px; } .user-order-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .user-order-row > div:last-of-type { justify-items: start; } .user-order-row > svg { display: none; } .user-order-row .user-status { grid-area: 1 / 2; } .user-order-row > div:last-of-type { grid-area: 2 / 1; } .user-saved-grid { grid-template-columns: 1fr; padding: 15px; } .user-wallet-feature > div, .user-settings-grid > article, .user-settings-grid > form { padding: 19px; } } .family-service-actions { gap: 7px; display: grid; } .family-service-actions button { background: var(--ink); color: #fff; cursor: pointer; text-transform: uppercase; border: 0; justify-content: center; align-items: center; gap: 7px; min-height: 41px; font-size: 10px; font-weight: 800; transition: background .18s; display: inline-flex; } .family-service-actions button:hover { background: var(--blue); } .family-service-actions button.saved { background: #9f43df; } .family-service-actions button:disabled { cursor: wait; opacity: .65; } .user-topup-form { background: #286dff0f; border-bottom: 1px solid #ffffff1a; gap: 13px; padding: 20px; display: grid; } .user-topup-form > div { grid-template-columns: 1fr 130px; gap: 11px; display: grid; } .user-topup-form label { color: #b9c4d5; letter-spacing: .08em; text-transform: uppercase; gap: 6px; font-size: 9px; font-weight: 800; display: grid; } .user-topup-form label span { color: #8793a8; font-weight: 500; } .user-topup-form input, .user-topup-form select { color: #fff; background: #0e121d; border: 1px solid #ffffff2e; outline: 0; height: 40px; padding: 0 10px; font-size: 11px; } .user-topup-form input:focus, .user-topup-form select:focus { border-color: #b8ff43; } .user-topup-form p { color: #94a1b6; margin: 0; font-size: 10px; line-height: 1.55; } .user-topup-form p strong { color: #b8ff43; text-transform: uppercase; } .user-topup-form .user-primary-action { justify-self: start; } .user-wallet-section { border-top: 1px solid #ffffff1a; } .user-wallet-section-heading { padding: 17px 21px 8px; } .user-wallet-section-heading span { color: #b8ff43; letter-spacing: .13em; text-transform: uppercase; font-size: 9px; font-weight: 800; } .user-wallet-section-heading h3 { color: #fff; letter-spacing: -.04em; text-transform: uppercase; margin: 6px 0 0; font-family: Barlow Condensed, sans-serif; font-size: 29px; line-height: .85; } .admin-danger-action { color: #ff8ca2; cursor: pointer; letter-spacing: .07em; text-transform: uppercase; background: none; border: 1px solid #ff69858c; justify-content: center; align-items: center; min-height: 36px; padding: 0 10px; font-size: 9px; font-weight: 900; display: inline-flex; } .admin-danger-action:hover { background: #ff69851a; } .admin-danger-action:disabled { cursor: not-allowed; opacity: .5; } .admin-funding-inputs { gap: 5px; min-width: 185px; display: grid; } .admin-funding-inputs input { color: #fff; background: #0d111a; border: 1px solid #ffffff29; outline: 0; width: 100%; height: 32px; padding: 0 8px; font-size: 9px; } .admin-funding-inputs input:focus { border-color: #b8ff43; } .admin-funding-actions { gap: 6px; display: flex; } .admin-funding-actions .admin-primary-action { min-height: 36px; padding: 0 10px; font-size: 9px; } @media (max-width: 700px) { .user-topup-form > div { grid-template-columns: 1fr; } .user-wallet-section-heading { padding: 15px 17px 7px; } .admin-funding-actions { flex-direction: column; } .admin-funding-actions .admin-primary-action, .admin-danger-action { width: 100%; } } @media (min-width: 701px) { .user-topup-form > div { grid-template-columns: minmax(0, 1fr) minmax(180px, .35fr); } } .user-funding-ready { background: #4456cc2e; border-bottom: 1px solid #c6d5ff29; gap: 13px; padding: 20px; display: grid; } .user-funding-ready__header { justify-content: space-between; align-items: flex-start; gap: 12px; display: flex; } .user-funding-ready__header span { color: #b7eaff; letter-spacing: .12em; font-size: 9px; font-weight: 800; } .user-funding-ready__header h3 { color: #f5f7ff; letter-spacing: -.04em; text-transform: uppercase; margin: 6px 0 0; font-family: Barlow Condensed, sans-serif; font-size: 27px; } .user-funding-ready__header strong { color: #d8e4ff; letter-spacing: .06em; text-transform: uppercase; border: 1px solid #a6b7ff59; padding: 7px 9px; font-size: 9px; } .user-funding-ready__fields { grid-template-columns: 1fr 170px; gap: 11px; display: grid; } .user-funding-ready label { color: #dbe4ff; letter-spacing: .08em; text-transform: uppercase; gap: 6px; font-size: 9px; font-weight: 800; display: grid; } .user-funding-ready input, .user-funding-ready select { color: #f3f6ff; background: #03092d85; border: 1px solid #c6d5ff42; outline: 0; height: 40px; padding: 0 10px; font-size: 11px; } .user-funding-ready input:focus, .user-funding-ready select:focus { border-color: #9ccaff; } .user-funding-ready__quote { color: #d9e9ff; background: #040f4166; border: 1px solid #99d2ff52; gap: 5px; padding: 13px; font-size: 11px; line-height: 1.5; display: grid; } .user-funding-ready__note { color: #c1cce9; margin: 0; font-size: 10px; line-height: 1.55; } .user-funding-ready button { color: #b8c9eb; letter-spacing: .06em; text-transform: uppercase; background: #ffffff14; border: 1px solid #c6d5ff40; justify-self: start; min-height: 38px; padding: 0 12px; font-size: 9px; font-weight: 800; } .user-funding-ready button:disabled { cursor: not-allowed; opacity: .75; } @media (max-width: 700px) { .user-funding-ready__header, .user-funding-ready__fields { grid-template-columns: 1fr; display: grid; } .user-funding-ready__header strong { justify-self: start; } .user-funding-ready { padding: 17px; } } .admin-category-operations { margin-top: 18px; } .admin-category-bulkbar { border-bottom: 1px solid #ffffff1c; flex-wrap: wrap; align-items: center; gap: 7px; padding: 12px 0; display: flex; } .admin-category-bulkbar strong { color: #b8ff43; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; font-weight: 900; } .admin-category-helper { color: #8e9aae; margin: 10px 0; font-size: 10px; line-height: 1.5; } .admin-category-operation-list { border: 1px solid #ffffff1f; } .admin-category-operation-list > article { background: #101520; border-bottom: 1px solid #ffffff1a; justify-content: space-between; align-items: center; gap: 16px; min-height: 88px; padding: 13px 15px; display: flex; } .admin-category-operation-list > article:last-child { border-bottom: 0; } .admin-category-operation-list > article.hidden { background: #7e90ae0f; } .admin-category-operation-list > article.archived { background: #ff63470f; } .admin-category-operation-ident { align-items: flex-start; gap: 9px; min-width: 0; display: flex; } .admin-category-operation-ident strong { color: #f5f7fb; font-size: 13px; display: block; } .admin-category-operation-ident small { color: #8e9aae; margin-top: 4px; font-size: 10px; display: block; } .admin-category-checkbox, .admin-category-drag { color: #b8ff43; background: none; border: 0; justify-content: center; align-items: center; display: inline-flex; } .admin-category-checkbox { cursor: pointer; padding: 2px; } .admin-category-drag { cursor: grab; color: #65728a; padding-top: 2px; } .admin-category-state { flex-wrap: wrap; gap: 5px; margin-top: 6px; display: flex; } .admin-category-operation-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; display: flex; } .admin-category-editor-secondary { background: #b8ff4309; border: 1px solid #b8ff4359; margin-top: 19px; padding: 14px 16px; } .admin-category-editor-secondary summary { cursor: pointer; color: #b8ff43; letter-spacing: .09em; text-transform: uppercase; font-size: 11px; font-weight: 800; } .admin-category-editor-secondary form { margin-top: 14px; } .admin-category-quickview { z-index: 80; background: #03060cc7; place-items: center; padding: 16px; display: grid; position: fixed; inset: 0; } .admin-category-quickview-card { background: #111824; border: 1px solid #b8ff438c; width: min(640px, 100%); max-height: min(704px, 92vh); padding: 24px; position: relative; overflow: auto; box-shadow: 0 22px 70px #00000080; } .admin-category-quickview-card h3 { color: #fff; margin: 6px 0; font-size: 26px; } .admin-category-quickview-card h4 { color: #b8ff43; letter-spacing: .09em; text-transform: uppercase; margin: 22px 0 10px; font-size: 11px; } .admin-category-quickview-card > p { color: #aeb9cd; font-size: 12px; line-height: 1.55; } .admin-category-quickview-close { color: #fff; background: none; border: 1px solid #ffffff2e; padding: 6px; position: absolute; top: 14px; right: 14px; } .admin-category-quickview-products { gap: 7px; display: grid; } .admin-category-quickview-products button { color: #e8edf5; text-align: left; background: #0b1019; border: 1px solid #ffffff1f; gap: 3px; padding: 12px; display: grid; } .admin-category-quickview-products button span { color: #8e9aae; font-size: 10px; } @media (max-width: 860px) { .admin-category-operation-list > article { flex-direction: column; align-items: flex-start; } .admin-category-operation-actions { justify-content: flex-start; } } @media (max-width: 600px) { .admin-category-bulkbar { align-items: stretch; } .admin-category-bulkbar .admin-secondary-action, .admin-category-bulkbar .admin-primary-action, .admin-category-bulkbar .admin-danger-action { flex: 1; } .admin-category-operation-actions .admin-secondary-action, .admin-category-operation-actions .admin-primary-action, .admin-category-operation-actions .admin-danger-action { min-height: 33px; padding: 0 8px; font-size: 8px; } } .admin-access-page { color: #fff; text-align: center; background: radial-gradient(circle at 70% 30%, #286dff3d, #0000 29%), #0b0e16; place-content: center; justify-items: center; gap: 15px; min-height: 100vh; padding: 32px; display: grid; } .admin-access-mark { color: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); background: #286dff; place-items: center; width: 48px; height: 48px; font-family: Barlow Condensed, sans-serif; font-size: 30px; font-weight: 800; display: grid; } .admin-access-mark.danger { clip-path: none; background: #d94b67; } .admin-access-page > span { color: #b8ff43; letter-spacing: .15em; text-transform: uppercase; font-size: 10px; font-weight: 800; } .admin-access-page h1 { letter-spacing: -.065em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(47px, 7vw, 84px); font-weight: 800; line-height: .76; } .admin-access-page h1 em { color: #b8ff43; font-style: normal; } .admin-access-page > p { color: #adb8ca; max-width: 450px; margin: 0; font-size: 12px; line-height: 1.6; } .admin-primary-action, .admin-secondary-action { cursor: pointer; letter-spacing: .07em; text-transform: uppercase; border: 0; justify-content: center; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; font-size: 10px; font-weight: 900; text-decoration: none; transition: transform .16s, background .16s; display: inline-flex; } .admin-primary-action { color: #111521; background: #b8ff43; } .admin-primary-action:hover { background: #fff; transform: translateY(-1px); } .admin-primary-action:active, .admin-secondary-action:active { transform: scale(.97); } .admin-primary-action:disabled, .admin-secondary-action:disabled { cursor: not-allowed; opacity: .55; } .admin-secondary-action { color: #b8ff43; background: none; border: 1px solid #b8ff4373; } .admin-secondary-action:hover { background: #b8ff4314; border-color: #b8ff43; } .admin-return-link { color: #b8ff43; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; font-weight: 800; text-decoration: none; } .super-admin { color: #f4f7fc; background: #0b0e16; min-height: 100vh; } .admin-topbar { background: #10141e; border-bottom: 1px solid #ffffff1a; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; padding: 0 clamp(16px, 4vw, 55px); display: flex; } .admin-brand { color: #fff; cursor: pointer; letter-spacing: -.05em; background: none; border: 0; align-items: center; gap: 0; font-family: Barlow Condensed, sans-serif; font-size: 27px; font-weight: 800; display: flex; } .admin-brand > span { color: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); background: #286dff; place-items: center; width: 22px; height: 22px; margin-right: 6px; font-size: 12px; display: grid; } .admin-brand em { color: #b8ff43; font-style: normal; } .admin-brand small { color: #93a0b6; letter-spacing: .11em; border-left: 1px solid #ffffff40; margin-left: 11px; padding-left: 11px; font-family: DM Sans, sans-serif; font-size: 8px; } .admin-topbar > div { align-items: center; gap: 15px; display: flex; } .admin-topbar > div span, .admin-topbar > div button { color: #b8c2d3; cursor: pointer; letter-spacing: .05em; text-transform: uppercase; background: none; border: 0; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; display: inline-flex; } .admin-topbar > div button:hover { color: #b8ff43; } .admin-shell { grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100vh - 68px); display: grid; } .admin-sidebar { background: #0e111a; border-right: 1px solid #ffffff1a; flex-direction: column; padding: 23px 14px; display: flex; } .admin-owner { border-bottom: 1px solid #ffffff1c; align-items: center; gap: 10px; padding: 0 7px 21px; display: flex; } .admin-owner > span { color: #fff; background: linear-gradient(135deg, #286dff, #9850df); place-items: center; width: 34px; height: 34px; font-family: Barlow Condensed, sans-serif; font-size: 19px; font-weight: 800; display: grid; } .admin-owner strong, .admin-owner small { text-overflow: ellipsis; white-space: nowrap; max-width: 155px; display: block; overflow: hidden; } .admin-owner strong { font-size: 12px; } .admin-owner small { color: #8d9aae; text-transform: uppercase; margin-top: 3px; font-size: 9px; } .admin-sidebar nav { gap: 4px; padding: 18px 0; display: grid; } .admin-sidebar nav button { color: #aab5c9; cursor: pointer; letter-spacing: .06em; text-align: left; text-transform: uppercase; background: none; border: 1px solid #0000; align-items: center; gap: 10px; min-height: 39px; padding: 0 9px; font-size: 10px; font-weight: 800; transition: background .18s, color .18s, border-color .18s; display: flex; } .admin-sidebar nav button:hover { color: #fff; background: #ffffff0d; } .admin-sidebar nav button.active { color: #b8ff43; background: #b8ff431a; border-color: #b8ff4347; } .admin-policy-note { color: #8995aa; border: 1px solid #ffffff1a; gap: 8px; margin-top: auto; padding: 11px 8px; font-size: 9px; line-height: 1.5; display: flex; } .admin-policy-note svg { color: #b8ff43; flex: none; } .admin-shell > main { min-width: 0; padding: clamp(18px, 3.8vw, 48px); } .admin-hero { background: radial-gradient(circle at 80% 20%, #9d49f285, #0000 31%), linear-gradient(120deg, #141d48, #10131e 67%); justify-content: space-between; align-items: end; gap: 24px; min-height: 236px; padding: clamp(25px, 4vw, 48px); display: flex; } .admin-hero > div:first-child > span, .admin-panel header span, .admin-form-kicker { color: #b8ff43; letter-spacing: .14em; text-transform: uppercase; font-size: 9px; font-weight: 800; } .admin-hero h1 { letter-spacing: -.065em; text-transform: uppercase; margin: 11px 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(61px, 7vw, 100px); font-weight: 800; line-height: .72; } .admin-hero h1 em { color: #b8ff43; font-style: normal; } .admin-hero p { color: #c3cedf; max-width: 510px; margin: 0; font-size: 12px; line-height: 1.55; } .admin-hero-note { background: #070a1340; border: 1px solid #b8ff435c; gap: 8px; max-width: 215px; padding: 18px; display: grid; } .admin-hero-note svg { color: #b8ff43; } .admin-hero-note strong { letter-spacing: -.03em; text-transform: uppercase; font-family: Barlow Condensed, sans-serif; font-size: 24px; } .admin-hero-note p { color: #c2ccdd; font-size: 10px; } .admin-metric-grid { grid-template-columns: repeat(4, 1fr); gap: 11px; margin: 12px 0; display: grid; } .admin-metric-grid article { background: #121723; border: 1px solid #ffffff1f; align-content: start; min-height: 136px; padding: 17px; display: grid; } .admin-metric-grid article > svg { color: #80a7ff; margin-bottom: 16px; } .admin-metric-grid article:first-child > svg { color: #b8ff43; } .admin-metric-grid article:nth-child(3) > svg { color: #ff8da3; } .admin-metric-grid span, .admin-metric-grid small { color: #8f9bb0; letter-spacing: .08em; text-transform: uppercase; font-size: 8px; font-weight: 800; display: block; } .admin-metric-grid strong { color: #fff; letter-spacing: -.055em; margin: 7px 0 5px; font-family: Barlow Condensed, sans-serif; font-size: 43px; line-height: .82; } .admin-two-column { grid-template-columns: 1fr 1fr; gap: 12px; display: grid; } .admin-panel { background: #121723; border: 1px solid #ffffff1f; } .admin-panel > header { border-bottom: 1px solid #ffffff1a; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 20px; display: flex; } .admin-panel > header h2 { letter-spacing: -.045em; text-transform: uppercase; margin: 7px 0 0; font-family: Barlow Condensed, sans-serif; font-size: 35px; line-height: .83; } .admin-panel > header p { color: #929fb4; max-width: 650px; margin: 8px 0 0; font-size: 11px; line-height: 1.5; } .admin-panel > header > svg { color: #b8ff43; } .admin-list { padding: 0 20px; } .admin-list article { border-bottom: 1px solid #ffffff17; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; display: flex; } .admin-list article:last-child { border-bottom: 0; } .admin-list strong { color: #fff; font-size: 11px; } .admin-list p { color: #8d99ae; margin: 4px 0 0; font-size: 9px; line-height: 1.45; } .admin-status { color: #aab6c9; letter-spacing: .07em; text-transform: uppercase; border: 1px solid #ffffff29; width: max-content; padding: 4px 6px; font-size: 8px; font-weight: 800; display: inline-flex; } .admin-status.good { color: #b8ff43; border-color: #b8ff4366; } .admin-status.danger { color: #ff8aa1; border-color: #ff668280; } .admin-status.muted { color: #a4b0c4; } .admin-empty { text-align: center; align-content: center; place-items: center; min-height: 190px; padding: 27px; display: grid; } .admin-empty svg { color: #b8ff43; } .admin-empty h3 { color: #fff; letter-spacing: -.035em; text-transform: uppercase; margin: 11px 0 5px; font-family: Barlow Condensed, sans-serif; font-size: 27px; } .admin-empty p { color: #8f9cb2; max-width: 430px; margin: 0; font-size: 10px; line-height: 1.55; } .admin-pricing-grid { background: #ffffff1a; grid-template-columns: .9fr 1.1fr; gap: 1px; display: grid; } .admin-pricing-grid form { background: #121723; align-content: start; gap: 12px; padding: 22px; display: grid; } .admin-pricing-grid h3, .admin-supplier-grid h3, .admin-health-grid h3 { color: #fff; letter-spacing: -.04em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: 31px; line-height: .86; } .admin-pricing-grid label { color: #b8c3d4; letter-spacing: .07em; text-transform: uppercase; gap: 6px; font-size: 9px; font-weight: 800; display: grid; } .admin-pricing-grid input, .admin-pricing-grid select { color: #fff; background: #0d111a; border: 1px solid #ffffff2b; outline: 0; height: 41px; padding: 0 10px; font-size: 11px; } .admin-pricing-grid input:focus, .admin-pricing-grid select:focus { border-color: #b8ff43; } .admin-pricing-grid form > p:not(.admin-form-kicker) { color: #909db3; margin: 0; font-size: 10px; line-height: 1.55; } .admin-product-preview { background: #286dff17; border: 1px solid #286dff8c; padding: 11px; } .admin-product-preview strong { color: #fff; font-size: 11px; } .admin-product-preview p, .admin-product-preview small { color: #aeb9cd; margin: 5px 0 0; font-size: 9px; line-height: 1.4; display: block; } .admin-form-split { grid-template-columns: 1fr 1fr; gap: 9px; display: grid; } .admin-supplier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 20px; display: grid; } .admin-supplier-grid > article { background: #0e121c; border: 1px solid #ffffff1f; align-content: start; gap: 13px; min-height: 200px; padding: 16px; display: grid; } .admin-supplier-head { justify-content: space-between; align-items: flex-start; gap: 9px; display: flex; } .admin-supplier-grid p { color: #909db3; margin: 0; font-size: 10px; line-height: 1.5; } .admin-supplier-grid button { margin-top: auto; } .admin-table-wrap { overflow-x: auto; } .admin-table-wrap table { border-collapse: collapse; width: 100%; min-width: 760px; } .admin-table-wrap th { color: #8491a7; letter-spacing: .08em; text-align: left; text-transform: uppercase; border-bottom: 1px solid #ffffff1a; padding: 12px 20px; font-size: 8px; } .admin-table-wrap td { color: #c0cad9; border-bottom: 1px solid #ffffff14; padding: 13px 20px; font-size: 10px; } .admin-table-wrap td strong, .admin-table-wrap td small { display: block; } .admin-table-wrap td strong { color: #fff; font-size: 11px; } .admin-table-wrap td small { color: #8693a9; margin-top: 3px; font-size: 9px; } .admin-health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 20px; display: grid; } .admin-health-grid article { background: #0e121c; border: 1px solid #ffffff1c; align-content: start; gap: 10px; min-height: 150px; padding: 16px; display: grid; } .admin-health-grid p { color: #929eb4; margin: 0; font-size: 10px; line-height: 1.5; } .admin-audit-list { padding: 0 20px; } .admin-audit-list article { border-bottom: 1px solid #ffffff17; grid-template-columns: 33px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 14px 0; display: grid; } .admin-audit-symbol { color: #b8ff43; background: #b8ff431a; place-items: center; width: 31px; height: 31px; display: grid; } .admin-audit-list strong { color: #fff; font-size: 11px; } .admin-audit-list p { color: #8e9aae; margin: 4px 0 0; font-size: 9px; line-height: 1.4; } .admin-audit-list > article > span { color: #8f9caf; letter-spacing: .05em; text-transform: uppercase; font-size: 8px; font-weight: 800; } @media (max-width: 1060px) { .admin-shell { grid-template-columns: 1fr; } .admin-sidebar { border-bottom: 1px solid #ffffff1a; border-right: 0; padding: 0; } .admin-owner, .admin-policy-note { display: none; } .admin-sidebar nav { padding: 8px 15px; display: flex; overflow-x: auto; } .admin-sidebar nav button { flex: none; } .admin-metric-grid { grid-template-columns: repeat(2, 1fr); } .admin-supplier-grid, .admin-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .admin-topbar { min-height: 59px; padding: 0 14px; } .admin-brand { font-size: 23px; } .admin-brand small, .admin-topbar > div span { display: none; } .admin-shell > main { padding: 14px; } .admin-sidebar nav { padding: 7px 8px; } .admin-sidebar nav button { min-height: 36px; padding: 0 7px; font-size: 8px; } .admin-hero { min-height: 0; padding: 27px 20px; display: grid; } .admin-hero h1 { font-size: 62px; } .admin-hero-note { max-width: none; } .admin-metric-grid, .admin-two-column, .admin-pricing-grid, .admin-supplier-grid, .admin-health-grid { grid-template-columns: 1fr; } .admin-panel > header { padding: 17px; } .admin-panel > header h2 { font-size: 30px; } .admin-list { padding: 0 15px; } .admin-form-split { grid-template-columns: 1fr; } .admin-supplier-grid, .admin-health-grid { padding: 15px; } .admin-audit-list { padding: 0 15px; } .admin-audit-list article { grid-template-columns: 31px minmax(0, 1fr); } .admin-audit-list > article > span { grid-column: 2; } } .customer-auth-card .user-primary-action, .customer-auth-card .user-secondary-action, .customer-auth-card > button { z-index: 3; cursor: pointer; pointer-events: auto; position: relative; } .customer-auth-page > section.customer-auth-layout { max-width: 700px; padding-top: clamp(42px, 8vh, 78px); } .customer-auth-stage { width: min(100%, 620px); } .customer-auth-copy.customer-auth-introduction { text-align: left; gap: 12px; padding: 0 0 30px; display: grid; } .customer-auth-copy.customer-auth-introduction > span { font-size: 10px; } .customer-auth-copy.customer-auth-introduction h1 { margin: 2px 0 8px; font-size: clamp(58px, 13vw, 86px); line-height: .74; } .customer-auth-copy.customer-auth-introduction > p { max-width: 540px; font-size: 14px; line-height: 1.7; } .customer-auth-copy.customer-auth-introduction > div { gap: 12px; margin-top: 14px; } .customer-auth-copy.customer-auth-introduction > div span { font-size: 12px; } .customer-auth-card.customer-auth-card--account { padding: clamp(26px, 5vw, 42px); } .customer-auth-card-heading { gap: 9px; margin-bottom: 27px; } .customer-auth-card-heading > p { font-size: 10px; } .customer-auth-card-heading h2 { font-size: clamp(37px, 7vw, 50px); line-height: .84; } .customer-auth-card-heading > span { font-size: 12px; line-height: 1.6; } .customer-password-control > button { width: 42px; } .customer-auth-inline-links { font-size: 10px; } .customer-auth-inline-links a { font-size: 11px; } .customer-auth-card--account .customer-auth-choices .user-primary-action, .customer-auth-card--account .customer-auth-choices .user-secondary-action { min-height: 44px; font-size: 10px; } .customer-auth-security-badge { font-size: 10px; } .customer-auth-card.customer-auth-card--account > small { font-size: 10px; line-height: 1.6; } @media (max-width: 560px) { .customer-auth-page > section.customer-auth-layout { padding-top: 36px; } .customer-auth-copy.customer-auth-introduction { padding-bottom: 28px; } .customer-auth-copy.customer-auth-introduction h1 { font-size: clamp(54px, 15vw, 72px); } .customer-auth-copy.customer-auth-introduction > p { font-size: 13px; } .customer-auth-copy.customer-auth-introduction > div span { font-size: 11px; } .customer-auth-card.customer-auth-card--account { padding: 25px 20px; } } .admin-search-results { display: none; } .admin-keyword-results { z-index: 45; color: #e3eaf5; background: #111824; border: 1px solid #b8ff4359; gap: 9px; margin: 0 clamp(14px, 4vw, 55px); padding: 14px; display: grid; position: relative; box-shadow: 0 16px 38px #00000047; } .admin-keyword-results > strong { color: #fff; font-size: 13px; } .admin-keyword-results > p { color: #9dabc0; margin: 0; font-size: 10px; } .admin-keyword-results > div { flex-wrap: wrap; gap: 7px; display: flex; } .admin-keyword-results > div > span { color: #b8ff43; letter-spacing: .09em; text-transform: uppercase; width: 100%; margin: 3px 0 1px; font-size: 8px; font-weight: 900; display: block; } .admin-keyword-results button { color: #dae3ef; cursor: pointer; text-align: left; background: #0c111b; border: 1px solid #ffffff26; max-width: 100%; padding: 8px 10px; font-size: 10px; font-weight: 800; } .admin-keyword-results button:hover, .admin-keyword-results button:focus-visible { color: #b8ff43; border-color: #b8ff43; outline: 0; } .admin-keyword-results small { color: #92a0b6; font-size: 10px; } @media (max-width: 680px) { .admin-keyword-results { margin: 0 10px; padding: 12px; } .admin-keyword-results button { width: 100%; } } .customer-auth-page > section.customer-auth-layout { grid-template-columns: 1fr; max-width: 760px; padding: clamp(36px, 8vh, 74px) 18px; display: grid; } .customer-auth-stage { justify-self: center; width: min(100%, 580px); } .customer-auth-banner { text-align: center; background: linear-gradient(150deg, #286dff33, #131825fa 62%); border: 1px solid #b8ff4359; border-bottom: 0; justify-items: center; gap: 10px; padding: 22px 20px 24px; display: grid; } .customer-auth-banner-brand { color: #fff; letter-spacing: -.055em; align-items: center; font-family: Barlow Condensed, sans-serif; font-size: 42px; font-weight: 800; display: flex; } .customer-auth-banner-brand > span { color: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); background: #286dff; place-items: center; width: 27px; height: 27px; margin-right: 7px; font-family: DM Sans, sans-serif; font-size: 14px; display: grid; } .customer-auth-banner-brand em { color: #b8ff43; font-style: normal; } .customer-auth-copy.customer-auth-banner > p { color: #d7e0ef; max-width: none; margin: 0; font-size: 11px; font-weight: 700; line-height: 1.45; } .customer-auth-card.customer-auth-card--account { background: linear-gradient(150deg, #286dff1f, #131825fa 48%); border-color: #b8ff4359; min-height: 0; padding: clamp(23px, 5vw, 40px); box-shadow: 12px 16px #b8ff430d; } .customer-auth-card-heading { gap: 8px; margin: 0 0 25px; display: grid; } .customer-auth-card-heading > p { color: #b8ff43; letter-spacing: .12em; margin: 0; font-size: 9px; font-weight: 900; } .customer-auth-card-heading h2 { color: #fff; letter-spacing: -.055em; text-transform: uppercase; margin: 0; font-family: Barlow Condensed, sans-serif; font-size: clamp(40px, 7vw, 58px); line-height: .8; } .customer-auth-card-heading > span { color: #b7c2d6; font-size: 11px; line-height: 1.55; } .customer-password-control { position: relative; } .customer-password-control > button { color: #93a2b9; cursor: pointer; background: none; border: 0; place-items: center; width: 38px; height: 100%; display: grid; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .customer-password-control > button:hover, .customer-password-control > button:focus-visible { color: #b8ff43; outline: 0; } .customer-auth-inline-links { color: #96a4ba; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: 9px; display: flex; } .customer-auth-inline-links a { color: #b8ff43; font-size: 10px; font-weight: 900; text-decoration: none; } .customer-auth-inline-links a:hover, .customer-auth-inline-links a:focus-visible { text-underline-offset: 4px; text-decoration: underline; } .customer-auth-card--account .customer-auth-choices { grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; } .customer-auth-card--account .customer-auth-choices .user-primary-action, .customer-auth-card--account .customer-auth-choices .user-secondary-action { min-height: 42px; padding: 0 10px; font-size: 9px; } .customer-auth-security-badge { color: #adb9cc; background: #b8ff430e; border: 1px solid #b8ff434d; border-radius: 999px; justify-content: center; align-self: center; align-items: center; gap: 7px; margin-top: 19px; padding: 8px 13px; font-size: 9px; display: flex; } .customer-auth-security-badge svg { color: #b8ff43; } .customer-auth-security-badge strong { color: #fff; } .customer-auth-card--signup .customer-auth-card-heading { margin-bottom: 21px; } .customer-auth-card--signup .customer-auth-security-badge { margin-top: 15px; } @media (max-width: 560px) { .customer-auth-page > section.customer-auth-layout { padding: 28px 12px; } .customer-auth-banner { padding: 20px 14px; } .customer-auth-banner-brand { font-size: 36px; } .customer-auth-card.customer-auth-card--account { padding: 22px 18px; } .customer-auth-card--account .customer-auth-choices { grid-template-columns: 1fr; } .customer-auth-inline-links { flex-direction: column; align-items: flex-start; } .customer-auth-security-badge { text-align: center; font-size: 8px; } .customer-auth-card--signup .grid.sm\:grid-cols-2 { grid-template-columns: 1fr; } } .admin-product-list-scroll > article { content-visibility: auto; contain-intrinsic-size: 68px; } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-rotate-x { syntax: "*"; inherits: false } @property --tw-rotate-y { syntax: "*"; inherits: false } @property --tw-rotate-z { syntax: "*"; inherits: false } @property --tw-skew-x { syntax: "*"; inherits: false } @property --tw-skew-y { syntax: "*"; inherits: false } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false } @property --tw-gradient-via-stops { syntax: "*"; inherits: false } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-tracking { syntax: "*"; inherits: false } @property --tw-ordinal { syntax: "*"; inherits: false } @property --tw-slashed-zero { syntax: "*"; inherits: false } @property --tw-numeric-figure { syntax: "*"; inherits: false } @property --tw-numeric-spacing { syntax: "*"; inherits: false } @property --tw-numeric-fraction { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false } @property --tw-brightness { syntax: "*"; inherits: false } @property --tw-contrast { syntax: "*"; inherits: false } @property --tw-grayscale { syntax: "*"; inherits: false } @property --tw-hue-rotate { syntax: "*"; inherits: false } @property --tw-invert { syntax: "*"; inherits: false } @property --tw-opacity { syntax: "*"; inherits: false } @property --tw-saturate { syntax: "*"; inherits: false } @property --tw-sepia { syntax: "*"; inherits: false } @property --tw-drop-shadow { syntax: "*"; inherits: false } @property --tw-drop-shadow-color { syntax: "*"; inherits: false } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false } @property --tw-backdrop-blur { syntax: "*"; inherits: false } @property --tw-backdrop-brightness { syntax: "*"; inherits: false } @property --tw-backdrop-contrast { syntax: "*"; inherits: false } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false } @property --tw-backdrop-invert { syntax: "*"; inherits: false } @property --tw-backdrop-opacity { syntax: "*"; inherits: false } @property --tw-backdrop-saturate { syntax: "*"; inherits: false } @property --tw-backdrop-sepia { syntax: "*"; inherits: false } @property --tw-duration { syntax: "*"; inherits: false } @property --tw-ease { syntax: "*"; inherits: false } @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: .5; } } @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); filter: blur(var(--tw-enter-blur, 0)); } } @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); filter: blur(var(--tw-exit-blur, 0)); } } @keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))))); } } @keyframes accordion-up { from { height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))))); } to { height: 0; } } @keyframes caret-blink { 0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; } }