/* Evelyn / Qingxiang premium interaction layer
   Shared by the client portal, storefront and administration pages. */
:root {
  --premium-accent: var(--cyan, var(--gold, #55e5ff));
  --premium-secondary: var(--violet, var(--purple, #a574ff));
  --premium-ease: cubic-bezier(.2,.75,.2,1);
  --premium-border: color-mix(in srgb, var(--premium-accent) 28%, transparent);
}

html.premium-ui {
  color-scheme: dark;
  scroll-padding-top: 84px;
}

html.premium-ui body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-attachment: fixed;
}

html.premium-ui body::selection,
html.premium-ui ::selection {
  color: #06101a;
  background: color-mix(in srgb, var(--premium-accent) 82%, white);
}

html.premium-ui ::-webkit-scrollbar { width: 8px; height: 8px; }
html.premium-ui ::-webkit-scrollbar-track { background: rgba(4,8,18,.45); }
html.premium-ui ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(var(--premium-secondary),var(--premium-accent)) padding-box;
}

.premium-scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 10020;
  width: var(--premium-scroll, 0%);
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,var(--premium-secondary),var(--premium-accent),#fff);
  box-shadow: 0 0 16px color-mix(in srgb, var(--premium-accent) 72%, transparent);
  transition: width .08s linear;
}

.premium-pointer-glow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9996;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%,-50%,0);
  background: radial-gradient(circle, color-mix(in srgb, var(--premium-accent) 13%, transparent), transparent 68%);
  mix-blend-mode: screen;
  transition: opacity .35s ease;
}

.premium-pointer-glow.is-visible { opacity: .72; }

.premium-trail-canvas {
  position: fixed;
  inset: 0;
  z-index: 9997;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.premium-noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9995;
  pointer-events: none;
  opacity: .026;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.premium-surface {
  --premium-rx: 0deg;
  --premium-ry: 0deg;
  --premium-lift: 0px;
  --premium-x: 50%;
  --premium-y: 50%;
  position: relative;
  isolation: isolate;
  transform: perspective(980px) translate3d(0,var(--premium-lift),0) rotateX(var(--premium-rx)) rotateY(var(--premium-ry));
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform .42s var(--premium-ease), border-color .35s ease, box-shadow .42s var(--premium-ease), filter .35s ease;
  will-change: transform;
}

html.premium-ui .premium-surface {
  box-shadow: 0 16px 46px rgba(0,0,0,.19),0 1px 0 rgba(255,255,255,.035) inset;
}

.premium-surface-glow {
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--premium-x) var(--premium-y), color-mix(in srgb, var(--premium-accent) 14%, transparent), transparent 43%);
  mix-blend-mode: screen;
  transition: opacity .38s ease;
}

.premium-surface.is-premium-hovered {
  --premium-lift: -7px;
  border-color: color-mix(in srgb, var(--premium-accent) 44%, transparent) !important;
  box-shadow:
    var(--premium-shadow-x,0px) var(--premium-shadow-y,20px) 58px rgba(0,0,0,.42),
    0 0 0 1px color-mix(in srgb, var(--premium-accent) 9%, transparent) inset,
    0 0 34px color-mix(in srgb, var(--premium-accent) 8%, transparent);
  filter: saturate(1.08) brightness(1.035);
}

.premium-surface.is-premium-hovered > .premium-surface-glow { opacity: 1; }

.premium-action {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .24s var(--premium-ease), border-color .24s ease, color .24s ease, background-color .24s ease, box-shadow .3s ease !important;
}

.premium-action:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--premium-accent) 55%, transparent) !important;
  box-shadow: 0 11px 28px rgba(0,0,0,.25),0 0 20px color-mix(in srgb, var(--premium-accent) 10%, transparent);
}

.premium-action:active:not(:disabled) { transform: translateY(0) scale(.975); }

.premium-ripple {
  position: absolute;
  z-index: -1;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  pointer-events: none;
  background: color-mix(in srgb, var(--premium-accent) 42%, white);
  transform: translate(-50%,-50%) scale(0);
  animation: premium-ripple .7s ease-out forwards;
}

@keyframes premium-ripple {
  70% { opacity: .24; }
  to { opacity: 0; transform: translate(-50%,-50%) scale(18); }
}

html.premium-ui input,
html.premium-ui textarea,
html.premium-ui select {
  transition: border-color .24s ease, box-shadow .28s ease, background-color .24s ease, transform .24s ease !important;
}

html.premium-ui input:hover,
html.premium-ui textarea:hover,
html.premium-ui select:hover {
  border-color: color-mix(in srgb, var(--premium-accent) 32%, transparent) !important;
}

html.premium-ui input:focus,
html.premium-ui textarea:focus,
html.premium-ui select:focus {
  border-color: color-mix(in srgb, var(--premium-accent) 68%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--premium-accent) 10%, transparent),0 9px 25px rgba(0,0,0,.18) !important;
  transform: translateY(-1px);
}

html.premium-ui :focus-visible {
  outline: 2px solid color-mix(in srgb, var(--premium-accent) 85%, white);
  outline-offset: 3px;
}

html.premium-ui .header,
html.premium-ui .topbar,
html.premium-ui .nav {
  backdrop-filter: blur(22px) saturate(1.28);
  -webkit-backdrop-filter: blur(22px) saturate(1.28);
}

html.premium-ui .hero p,
html.premium-ui .feature p,
html.premium-ui .branch p,
html.premium-ui .control > p,
html.premium-ui .hint,
html.premium-ui .tool-note {
  font-size: max(.8rem,13px);
  line-height: 1.72;
}

html.premium-ui .card-title small,
html.premium-ui .tool-head small,
html.premium-ui .item-main small,
html.premium-ui .metric small,
html.premium-ui .top-actions a,
html.premium-ui .top-actions button {
  font-size: max(.72rem,12px);
}

html.premium-ui .badge,
html.premium-ui .badge2,
html.premium-ui .user-tag,
html.premium-ui .role,
html.premium-ui .tag {
  box-shadow: 0 0 0 1px rgba(255,255,255,.025) inset;
  transition: filter .25s ease, transform .25s var(--premium-ease), box-shadow .25s ease;
}

html.premium-ui .badge:hover,
html.premium-ui .badge2:hover,
html.premium-ui .user-tag:hover,
html.premium-ui .role:hover,
html.premium-ui .tag:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 0 18px color-mix(in srgb, var(--premium-accent) 12%, transparent);
}

.premium-reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .72s var(--premium-ease), translate .72s var(--premium-ease);
}

.premium-reveal.premium-visible {
  opacity: 1;
  translate: 0 0;
}

html.premium-ui .table-wrap tbody tr {
  transition: background-color .24s ease, transform .24s var(--premium-ease), box-shadow .24s ease;
}

html.premium-ui .table-wrap tbody tr:hover {
  position: relative;
  z-index: 1;
  transform: translateX(4px);
  box-shadow: -3px 0 0 var(--premium-accent);
}

@media (max-width: 760px), (pointer: coarse) {
  .premium-pointer-glow,.premium-trail-canvas { display: none !important; }
  .premium-surface,.premium-surface.is-premium-hovered {
    --premium-rx: 0deg !important;
    --premium-ry: 0deg !important;
    --premium-lift: 0px !important;
    transform: none !important;
  }
  .premium-action:hover:not(:disabled) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-pointer-glow,.premium-trail-canvas,.premium-scroll-progress { display: none !important; }
  .premium-surface,.premium-action,.premium-reveal,
  html.premium-ui input,html.premium-ui textarea,html.premium-ui select {
    animation: none !important;
    transition-duration: .01ms !important;
    transform: none !important;
    translate: none !important;
  }
  .premium-reveal { opacity: 1 !important; }
}