/* Keyserver theme layer --------------------------------------------------- */

:root {
  color-scheme: dark;
  --ks-bg: #080808;
  --ks-surface: #121212;
  --ks-surface-raised: #171717;
  --ks-muted: #a3a3a3;
  --ks-border: rgba(255, 255, 255, 0.09);
  --ks-border-strong: rgba(255, 255, 255, 0.15);
  --ks-accent: rgb(var(--cl-accent));
}

html { background: var(--ks-bg); }

body {
  min-width: 320px;
  min-height: 100vh;
  background: var(--ks-bg) !important;
  letter-spacing: -0.006em;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(var(--cl-accent), .32); color: #fff; }

/* A single subtle accent wash gives the page depth without decorative blobs. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: -1;
  height: 28rem;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--cl-accent), .07), transparent 72%);
}

#app { max-width: 76rem; }

/* Surfaces */
.bg-card { background-color: var(--ks-surface) !important; }
.bg-background { background-color: var(--ks-bg) !important; }
.border-white\/5 { border-color: var(--ks-border) !important; }

.component .bg-card,
.component.bg-card,
[role="dialog"] .bg-card,
[role="dialog"] .bg-background {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025), 0 18px 55px rgba(0, 0, 0, .2);
}

.rounded-lg { border-radius: .7rem; }
.rounded-xl { border-radius: .85rem; }

/* Header */
header.component > div:first-child {
  background: rgba(18, 18, 18, .88) !important;
  border-color: var(--ks-border) !important;
  backdrop-filter: blur(16px);
}

header h1 {
  letter-spacing: -.035em;
  font-weight: 700 !important;
}

header img { border-radius: .55rem !important; }

header nav a,
header nav button,
.currency-selector .choices__inner {
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

header nav a:hover,
header nav button:hover {
  color: #fff !important;
  border-color: var(--ks-border-strong) !important;
  background: var(--ks-surface-raised) !important;
}

header nav .bg-accent-500\/10 {
  background: rgba(var(--cl-accent), .13) !important;
  border-color: rgba(var(--cl-accent), .32) !important;
}

/* Typography */
h1, h2, h3 {
  letter-spacing: -.025em;
  text-wrap: balance;
}

.text-t-primary\/50 { color: rgba(var(--cl-t-primary), .6) !important; }
.text-t-primary\/75,
.text-t-primary\/80 { color: rgba(var(--cl-t-primary), .68) !important; }
.text-t-primary\/90 { color: rgba(var(--cl-t-primary), .86) !important; }

.component h2.border-l-4 {
  padding-left: 0 !important;
  border-left-width: 0 !important;
  font-size: 1.5rem;
}

.component h2.border-l-4::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  margin-top: .65rem;
  border-radius: 999px;
  background: var(--ks-accent);
}

/* Product cards */
.component a.block.h-full.bg-card {
  overflow: hidden;
  border-color: var(--ks-border) !important;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.component a.block.h-full.bg-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--cl-accent), .38) !important;
  background: var(--ks-surface-raised) !important;
}

.component a.block.h-full.bg-card > div { transition: none !important; }
.component a.block.h-full.bg-card > div:hover { background: transparent !important; }

.component a.block.h-full.bg-card img {
  background: #0d0d0d;
  border-radius: .5rem !important;
  transition: opacity 180ms ease;
}

.component a.block.h-full.bg-card:hover img { opacity: .9; }

/* Inputs and controls */
input, textarea, select { caret-color: var(--ks-accent); }

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.choices__inner {
  color: #f5f5f5 !important;
  background-color: #101010 !important;
  border-color: var(--ks-border) !important;
}

input::placeholder, textarea::placeholder { color: #737373 !important; }

input:focus,
textarea:focus,
select:focus,
.focus-within\:border-accent-500:focus-within {
  outline: none;
  border-color: rgba(var(--cl-accent), .72) !important;
  box-shadow: 0 0 0 3px rgba(var(--cl-accent), .11);
}

button, a { -webkit-tap-highlight-color: transparent; }

.bg-accent-500 {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset;
}

button.bg-accent-500:hover,
a.bg-accent-500:hover { filter: brightness(1.08); }

button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(var(--cl-accent), .9);
  outline-offset: 2px;
}

/* Menus, modals and utility surfaces */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  color: #f5f5f5 !important;
  background: var(--ks-surface-raised) !important;
  border-color: var(--ks-border-strong) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
}

.choices__item--choice.is-highlighted { background: rgba(var(--cl-accent), .12) !important; }
[role="dialog"] .bg-black\/75 { background: rgba(0, 0, 0, .82) !important; backdrop-filter: blur(5px); }

.builder-toolbar > div { background: #0a0a0a !important; }
.builder-toolbar button { background: var(--ks-surface-raised) !important; }
.builder-toolbar button:hover { background: #0a0a0a !important; color: var(--ks-accent) !important; }

hr { border-color: var(--ks-border) !important; }

footer {
  margin-top: 3rem;
  color: var(--ks-muted);
}

footer a:hover { color: rgb(var(--cl-accent)) !important; }

@media (max-width: 767px) {
  #app { padding: 1rem; }
  body::before { height: 20rem; }
  header.component > div:first-child { backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Rebuilt storefront components ------------------------------------------ */
.ks-header { padding-top: 1.25rem; }

.ks-header__bar {
  min-height: 4.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: .75rem 1rem;
  border: 1px solid var(--ks-border);
  border-radius: .85rem;
  background: rgba(18, 18, 18, .9);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .18);
  backdrop-filter: blur(16px);
}

.ks-brand { min-width: 0; display: inline-flex; align-items: center; gap: .75rem; color: #fafafa; }
.ks-brand__logo { width: 2.5rem; height: 2.5rem; object-fit: contain; border-radius: .55rem; }
.ks-brand__name { overflow: hidden; font-size: 1.05rem; font-weight: 700; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }

.ks-stats { display: flex; align-items: center; }
.ks-stats > div { min-width: 5.25rem; padding: 0 1rem; text-align: center; border-right: 1px solid var(--ks-border); }
.ks-stats > div:last-child { border: 0; }
.ks-stats strong, .ks-stats span { display: block; }
.ks-stats strong { color: #f5f5f5; font-size: .9rem; font-weight: 650; }
.ks-stats span { margin-top: .12rem; color: #737373; font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.ks-header__actions { justify-self: end; display: flex; align-items: center; gap: .5rem; }
.ks-icon-button { position: relative; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--ks-border); border-radius: .6rem; color: #a3a3a3; background: #101010; }
.ks-icon-button svg { width: 1.15rem; height: 1.15rem; }
.ks-icon-button:hover { color: #fff; border-color: var(--ks-border-strong); background: #191919; }
.ks-icon-button.is-active { color: var(--ks-accent); border-color: rgba(var(--cl-accent), .35); background: rgba(var(--cl-accent), .1); }
.ks-cart-count { position: absolute; top: -.35rem; right: -.35rem; min-width: 1.05rem; height: 1.05rem; display: grid; place-items: center; padding: 0 .2rem; border: 2px solid var(--ks-surface); border-radius: 99px; color: #fff; background: var(--ks-accent); font-size: .58rem; font-weight: 700; }

.ks-header__lower { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .8rem .25rem 0; }
.ks-nav { min-width: 0; display: flex; align-items: center; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
.ks-nav::-webkit-scrollbar { display: none; }
.ks-nav a { position: relative; padding: .55rem .75rem; border-radius: .5rem; color: #8a8a8a; font-size: .8rem; font-weight: 550; white-space: nowrap; }
.ks-nav a:hover { color: #e5e5e5; background: rgba(255, 255, 255, .035); }
.ks-nav a.is-active { color: #fff; }
.ks-nav a.is-active::after { content: ""; position: absolute; right: .75rem; bottom: .18rem; left: .75rem; height: 1px; background: var(--ks-accent); }
.ks-header__description { max-width: 28rem; overflow: hidden; color: #737373; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.ks-currency .choices__inner { border-radius: .6rem !important; background: #101010 !important; }

/* Product catalog */
.ks-product-card { height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ks-border); border-radius: .8rem; color: #f5f5f5; background: var(--ks-surface); transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease; }
.ks-product-card:hover { transform: translateY(-3px); border-color: rgba(var(--cl-accent), .36); background: var(--ks-surface-raised); }
.ks-product-card__media { position: relative; margin: .45rem; overflow: hidden; border-radius: .55rem; background: #0a0a0a; }
.ks-product-card__media img { width: 100%; display: block; transition: opacity 180ms ease, transform 300ms ease; }
.ks-product-card:hover img { opacity: .88; transform: scale(1.012); }
.ks-product-card__placeholder { display: grid; place-items: center; color: rgba(var(--cl-accent), .72); }
.ks-product-card__placeholder svg { width: 3.25rem; height: 3.25rem; }
.ks-product-card__badges { position: absolute; top: .55rem; right: .55rem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.ks-product-card__badges span { padding: .3rem .5rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: .4rem; color: #fff; background: color-mix(in srgb, var(--badge-color) 75%, #111); font-size: .65rem; font-weight: 650; }
.ks-product-card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: .7rem; padding: .65rem 1rem 1rem; }
.ks-product-card__heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ks-product-card__heading h3 { min-width: 0; overflow: hidden; font-size: .95rem; font-weight: 650; letter-spacing: -.018em; text-overflow: ellipsis; white-space: nowrap; }
.ks-product-card__heading svg { width: 1rem; height: 1rem; flex: none; color: #525252; transition: color 180ms ease, transform 180ms ease; }
.ks-product-card:hover .ks-product-card__heading svg { color: var(--ks-accent); transform: translateX(2px); }
.ks-product-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ks-product-card__meta span { color: #737373; font-size: .72rem; }
.ks-product-card__meta strong { color: var(--ks-accent); font-size: .85rem; font-weight: 650; }

/* Account navigation */
.ks-account-nav { overflow: hidden; border: 1px solid var(--ks-border); border-radius: .8rem; background: var(--ks-surface); }
.ks-account-nav__identity { padding: 1.1rem; border-bottom: 1px solid var(--ks-border); }
.ks-account-nav__identity span, .ks-account-nav__identity strong { display: block; }
.ks-account-nav__identity span { margin-bottom: .35rem; color: #737373; font-size: .66rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.ks-account-nav__identity strong { overflow: hidden; color: #e5e5e5; font-size: .8rem; font-weight: 550; text-overflow: ellipsis; }
.ks-account-nav nav { display: flex; flex-direction: column; padding: .45rem; }
.ks-account-nav nav a, .ks-account-nav nav button { display: flex; align-items: center; justify-content: space-between; padding: .65rem .7rem; border-radius: .45rem; color: #8a8a8a; font-size: .78rem; text-align: left; }
.ks-account-nav nav a:hover, .ks-account-nav nav button:hover { color: #fff; background: #191919; }
.ks-account-nav nav a.is-active { color: #fff; background: rgba(var(--cl-accent), .11); box-shadow: inset 2px 0 var(--ks-accent); }
.ks-account-nav nav button { margin-top: .35rem; border-top: 1px solid var(--ks-border); border-radius: 0; }

/* Footer */
.ks-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: 4rem; padding: 1.4rem .25rem; border-top: 1px solid var(--ks-border); }
.ks-footer__brand > a { display: inline-flex; align-items: center; gap: .6rem; color: #d4d4d4; }
.ks-footer__brand img { width: 1.6rem; height: 1.6rem; object-fit: contain; border-radius: .35rem; }
.ks-footer__brand strong { font-size: .82rem; font-weight: 650; }
.ks-footer__brand p { margin-top: .5rem; color: #666; font-size: .68rem; }
.ks-footer__right { display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.ks-footer__right nav, .ks-footer__socials { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .9rem; }
.ks-footer__right nav a { color: #737373; font-size: .7rem; }
.ks-footer__right a:hover { color: var(--ks-accent) !important; }
.ks-footer__socials a { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 1px solid var(--ks-border); border-radius: .45rem; color: #737373; font-size: .8rem; }

/* Consistent inner pages */
.component > .py-6, .component > div > .py-6 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.component .editor { color: #b8b8b8; font-size: .9rem; line-height: 1.7; }
.component .editor h1, .component .editor h2, .component .editor h3 { color: #f5f5f5; }
.component table { border-collapse: separate; border-spacing: 0; }
.component tr { border-color: var(--ks-border) !important; }
.component th { color: #777; font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }

.ks-section { padding: 2.75rem 0; }
.ks-section-title { margin-bottom: 1.15rem; color: #f5f5f5; font-size: 1.35rem; font-weight: 680; letter-spacing: -.035em; }
.ks-catalog__search { max-width: 28rem; margin: 0 0 1.2rem auto; }
.ks-search-field { display: flex; align-items: center; gap: .7rem; padding: .68rem .85rem; border: 1px solid var(--ks-border); border-radius: .65rem; color: #737373; background: #101010; transition: border-color 150ms ease, box-shadow 150ms ease; }
.ks-search-field:focus-within { border-color: rgba(var(--cl-accent), .62); box-shadow: 0 0 0 3px rgba(var(--cl-accent), .09); }
.ks-search-field svg { width: 1rem; height: 1rem; flex: none; }
.ks-search-field input { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: .78rem; }

.ks-product-layout { align-items: flex-start; }
.ks-product-content { overflow: hidden; border: 1px solid var(--ks-border); background: var(--ks-surface) !important; }
.ks-product-content > div:first-child { background: #101010 !important; }
.ks-product-content .splide { background: #0a0a0a; }
.ks-product-content .editor { min-height: 8rem; }
.ks-product-purchase { position: sticky; top: 1.25rem; }
.ks-product-purchase > div { border-color: var(--ks-border) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .24); }
.ks-product-purchase > div > div:first-child { background: #101010 !important; }
.ks-product-purchase .text-3xl { color: var(--ks-accent) !important; font-weight: 680; letter-spacing: -.04em; }
.ks-product-page label { color: #a3a3a3; font-size: .76rem; font-weight: 550; }
.ks-product-page .bg-white\/\[0\.025\] { background: #161616 !important; }

.ks-cart-layout { align-items: flex-start; margin-bottom: 3rem !important; }
.ks-cart-page .lg\:w-3\/4 > div > template + div,
.ks-cart-page .bg-card { border-color: var(--ks-border) !important; }
.ks-cart-page .flex-col.p-1 { padding: .35rem !important; overflow: hidden; transition: border-color 150ms ease; }
.ks-cart-page .flex-col.p-1:hover { border-color: var(--ks-border-strong) !important; }
.ks-cart-page img { background: #0a0a0a; }
.ks-cart-page .lg\:w-1\/4 { position: sticky; top: 1.25rem; }

.ks-faq details,
.ks-faq .bg-card,
.ks-feedbacks .bg-card,
.ks-categories .bg-card { border-color: var(--ks-border) !important; background: var(--ks-surface) !important; }
.ks-feedbacks .bg-card { transition: border-color 150ms ease, transform 150ms ease; }
.ks-feedbacks .bg-card:hover { transform: translateY(-2px); border-color: rgba(var(--cl-accent), .28) !important; }

/* Normalize every remaining stock panel and interactive element. */
.component button[class*="border"],
.component a[class*="border"] { border-color: var(--ks-border); }
.component button[class*="bg-card"]:hover,
.component a[class*="bg-card"]:hover { background-color: #191919 !important; }
.component [class*="shadow-2xl"] { box-shadow: 0 22px 70px rgba(0, 0, 0, .45) !important; }

/* Shared inner-page system */
.template-custom-page .ks-custom-page-heading {
  padding: 4rem 0 2rem;
  border-bottom: 1px solid var(--ks-border);
}

.template-custom-page .ks-custom-page-heading h1 {
  letter-spacing: -.04em;
}

body[class*="template-customer-"] .container > .relative,
.template-maintenance main {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

body[class*="template-customer-"] .lg\:w-3\/4 > .bg-card,
body[class*="template-customer-"] .lg\:w-3\/4 > .bg-background,
body[class*="template-customer-"] .lg\:w-3\/4 > div[class*="border"],
body[class*="template-customer-"] .lg\:w-3\/4 > form,
.template-maintenance main > div,
[role="dialog"] > div > div[class*="border"] {
  border-color: var(--ks-border) !important;
  background: var(--ks-surface) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

body[class*="template-customer-"] .bg-white\/5,
body[class*="template-customer-"] .bg-white\/10 {
  background-color: rgba(255, 255, 255, .035) !important;
}

body[class*="template-customer-"] table {
  min-width: 42rem;
}

body[class*="template-customer-"] thead {
  background: #171717 !important;
}

body[class*="template-customer-"] tbody tr {
  transition: background-color 150ms ease;
}

body[class*="template-customer-"] tbody tr:hover {
  background: rgba(255, 255, 255, .025);
}

body[class*="template-customer-"] td,
body[class*="template-customer-"] th {
  border-color: var(--ks-border) !important;
}

body[class*="template-customer-"] [class*="overflow-y-hidden"] {
  overflow-x: auto;
  scrollbar-color: #404040 transparent;
}

[role="dialog"] input,
[role="dialog"] textarea,
[role="dialog"] select {
  background: #101010 !important;
}

[role="dialog"] h2,
[role="dialog"] h3 {
  color: #f5f5f5;
  letter-spacing: -.025em;
}

.announcement > div {
  border-color: rgba(var(--cl-accent), .35) !important;
  background: rgba(var(--cl-accent), .12) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

.announcement a:hover { text-decoration: underline; }

.ks-product-card:focus-visible,
.ks-brand:focus-visible,
.ks-nav a:focus-visible,
.ks-icon-button:focus-visible,
.ks-account-nav a:focus-visible,
.ks-account-nav button:focus-visible {
  outline: 2px solid rgba(var(--cl-accent), .9);
  outline-offset: 3px;
}

.component .text-blue-500,
body[class*="template-customer-"] .text-blue-500 {
  color: var(--ks-accent) !important;
}

.component .bg-blue-500\/20,
body[class*="template-customer-"] .bg-blue-500\/20 {
  background: rgba(var(--cl-accent), .1) !important;
}

.component .border-blue-500\/10,
body[class*="template-customer-"] .border-blue-500\/10 {
  border-color: rgba(var(--cl-accent), .3) !important;
}

.component .text-yellow-500,
body[class*="template-customer-"] .text-yellow-500 {
  color: #a3a3a3 !important;
}

.component .bg-yellow-500\/20,
body[class*="template-customer-"] .bg-yellow-500\/20 {
  background: rgba(255, 255, 255, .045) !important;
}

.component .border-yellow-500\/10,
body[class*="template-customer-"] .border-yellow-500\/10 {
  border-color: var(--ks-border) !important;
}

.component p.text-t-primary\/60:only-child {
  color: #737373 !important;
}

@media (max-width: 767px) {
  .ks-header { padding-top: .25rem; }
  .ks-header__bar { grid-template-columns: minmax(0, 1fr) auto; min-height: 4rem; gap: .75rem; padding: .7rem; backdrop-filter: none; }
  .ks-stats { display: none; }
  .ks-brand__logo { width: 2.2rem; height: 2.2rem; }
  .ks-header__lower { padding-top: .55rem; }
  .ks-header__description { display: none; }
  .ks-currency { display: none; }
  .ks-nav { width: 100%; }
  .ks-footer { align-items: flex-start; flex-direction: column; }
  .ks-footer__right { align-items: flex-start; }
  .ks-footer__right nav, .ks-footer__socials { justify-content: flex-start; }
  .ks-section { padding: 2rem 0; }
  .ks-catalog__search { max-width: none; margin-left: 0; }
  .ks-product-purchase, .ks-cart-page .lg\:w-1\/4 { position: static; }
  .template-custom-page .ks-custom-page-heading { padding: 2.75rem 0 1.5rem; }
  body[class*="template-customer-"] .container > .relative { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}