@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700&display=swap');

:root {

  --color-cyan-400:    oklch(78.9% .154 211.53);
  --color-violet-100:  oklch(94.3% .029 294.588);
  --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-violet-700:  oklch(49.1% .27  292.581);
  --color-purple-400:  oklch(71.4% .203 305.504);
  --color-zinc-600:    oklch(44.2% .017 285.786);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-white:       #fff;

  --bg:          #060606;
  --violet-400:  var(--color-violet-400);
  --violet-500:  var(--color-violet-500);
  --cyan-400:    var(--color-cyan-400);
  --neutral-400: var(--color-neutral-400);

  --font-unbounded: 'Unbounded', sans-serif;
  --font-neue:      'Neue-Bold', sans-serif;

  --ease-spring: cubic-bezier(.175,.885,.32,1.275);
  --ease-out:    cubic-bezier(0,.8,.26,.99);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
}

@font-face {
  font-family: 'Neue-Bold';
  font-display: swap;
  src: url('/NeueBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; }
body { font-family: var(--font-unbounded); background: var(--bg); color: rgba(255,255,255,0.85); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; border: none; border-radius: 0; outline: none; }
img, svg, video { display: block; max-width: 100%; }
::-webkit-scrollbar { display: none; }

.flex-rcc  { display: flex; flex-direction: row;    justify-content: center;     align-items: center; }
.flex-rcs  { display: flex; flex-direction: row;    justify-content: flex-start; align-items: center; }
.flex-col-ss { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.flex-col-sc { display: flex; flex-direction: column; justify-content: center;     align-items: flex-start; }
.flex-col-cc { display: flex; flex-direction: column; justify-content: center;     align-items: center; }
.f { width: 100%; height: 100%; }

.mp-c1 {
  z-index: 10;
  display: flex; flex-direction: row;
  justify-content: center; align-items: center;
  width: 100%;
}
.mp-c2 {
  z-index: 15;
  width: 100%; max-width: 1370px; height: 100%;
  padding-inline: 1rem;
}
@media (min-width: 64rem) { .mp-c2 { padding-inline: 0; } }

.smooth      { will-change:transform; transition:all 1.4s cubic-bezier(.175,.885,.32,1.275); }

.smooth-fast { will-change:transform; transition:all .2s cubic-bezier(0,.8,.26,.99); }

.smooth-to   { will-change:transform; transition:all .5s ease-in-out; }

@keyframes fade-in-up     { 0%{opacity:0;transform:scale(.93)translateY(-33px)} to{opacity:1;transform:none} }
@keyframes fade-in-down   { 0%{opacity:0;transform:scale(.93)translateY(33px)}  to{opacity:1;transform:none} }
@keyframes fade-in-left   { 0%{opacity:0;transform:scale(.93)translate(-22px)}  to{opacity:1;transform:none} }
@keyframes fade-in-right  { 0%{opacity:0;transform:scale(.93)translate(22px)}   to{opacity:1;transform:none} }
@keyframes fade-out-down  { 0%{opacity:1;transform:none} to{opacity:0;transform:scale(.93)translateY(33px)} }
@keyframes fade-in-small-custom { 0%{opacity:0} to{opacity:1} }
@keyframes fade-in-custom { 0%{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} }
@keyframes fade-out-custom{ 0%{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.93)} }
@keyframes fade-in-dash   { 0%{opacity:0;transform:translateY(44px)scale(.95)} to{opacity:1;transform:none} }
@keyframes fade-out-dash  { 0%{opacity:1;transform:none} to{opacity:0;transform:translateY(44px)scale(.95)} }
@keyframes anim-scale      { 0%{transform:scale(1.15)} 50%{transform:scale(1.05)} to{transform:scale(1.15)} }
@keyframes pulse-dot       { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes pulse-unread    { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(148,255,18,.55)} 50%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(148,255,18,0)} }

.anim-fadein-up     { will-change:transform; animation:1.2s both fade-in-up; }
.anim-fadein-down   { will-change:transform; animation:1.2s both fade-in-down; }
.anim-fadein-left   { will-change:transform; animation:1.2s both fade-in-left; }
.anim-fadein-right  { will-change:transform; animation:1.2s both fade-in-right; }
.anim-fadeout-down  { will-change:transform; animation:1.2s both fade-out-down; }
.anim-fadein-small  { animation:1.3s fade-in-small-custom; }
.anim-fadein        { will-change:transform; animation:.9s both fade-in-custom; }
.anim-fadeout       { will-change:transform; animation:.5s both fade-out-custom; }
.anim-dash-fadein   { will-change:transform; animation:.6s both fade-in-dash; }
.anim-dash-fadeout  { will-change:transform; animation:.6s both fade-out-dash; }
.anim-scale         { will-change:transform; animation:5s infinite anim-scale; }

.bg-1 { background: radial-gradient(circle at top, #c6a6ff, #8642ff 33%, #6d00ff); }
.bg-danger  { background: radial-gradient(105.38% 145.07% at 41.4% 40.19%, rgba(255,18,18,.12) 0, rgba(255,106,169,0) 65%); }
.bg-success { background: radial-gradient(105.38% 145.07% at 41.4% 40.19%, rgba(148,255,18,.10) 0, rgba(255,106,169,0) 65%); }
.bg-blur    { backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }

.card:hover {
  transition: all .2s cubic-bezier(0,.8,.26,.99);
  transform: perspective(500px) rotateX(3deg) scale(1.12);
}

.slider { -webkit-appearance:none; -moz-appearance:none; appearance:none; width:100%; height:6px; background:rgba(255,255,255,.10); border-radius:10px; cursor:pointer; }
.slider::-webkit-slider-thumb {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  cursor:pointer;
  background: linear-gradient(135deg, #8e43ff, #00b8db);
  border: 2px solid rgba(255,255,255,.10);
  border-radius: 50%; width:20px; height:20px;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(142,67,255,.30);
}
.slider::-webkit-slider-thumb:hover { transform:scale(1.1); box-shadow:0 6px 16px rgba(142,67,255,.40); }
.slider::-moz-range-thumb {
  background: linear-gradient(135deg, #8e43ff, #00b8db);
  border-radius:50%; width:20px; height:20px;
  transition:all .2s; box-shadow:0 4px 12px rgba(142,67,255,.30); border:none;
}
.slider::-moz-range-thumb:hover { transform:scale(1.1); box-shadow:0 6px 16px rgba(142,67,255,.40); }
.slider::-webkit-slider-track { background:rgba(255,255,255,.10); border-radius:10px; height:6px; }
.slider::-moz-range-track    { background:rgba(255,255,255,.10); border:none; border-radius:10px; height:6px; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; text-align: center; }

.btn-hx {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  border: 1px solid rgba(166,133,255,.07);
  background: rgba(166,133,255,.06);
  padding: 12px 20px; border-radius: 20px; font-size: 17px;
  cursor: pointer; font-family: var(--font-unbounded);
  color: rgba(237,233,254,.65);
  transition: all 1.4s var(--ease-spring);
  will-change: transform;
}
.btn-hx:hover { background: rgba(196,180,255,.1); color: rgba(237,233,254,.85); opacity: .9; transform: scale(.98); }
.btn-hx:active { transform: scale(.92); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 17px;
  border: 2px solid rgba(82,82,92,.05);
  border-radius: 25px; padding: 18px 32px;
  font-family: var(--font-unbounded); font-size: 19px;
  color: rgba(255,255,255,.6); cursor: pointer;
  transition: all 1.4s var(--ease-spring);
  will-change: transform;
}
.btn-ghost:hover { border-color: rgba(82,82,92,.1); color: rgba(255,255,255,.7); transform: scale(.98); }
.btn-ghost:active { transform: scale(.94); }

.tabs-hx {
  display: flex; flex-direction: row; gap: 12px;
  background: rgba(255,255,255,.02); border-radius: 28px;
  padding: 12px 13px;
}
@media (min-width: 40rem) { .tabs-hx { flex-direction: row; gap: 24px; } }

.tab-hx {
  border: 1px solid transparent; background: transparent;
  padding: 12px 20px; font-size: 17px; border-radius: 20px;
  cursor: pointer; font-family: var(--font-unbounded);
  color: rgba(255,255,255,.4);
  display: flex; align-items: center; gap: 14px;
  transition: all 1.4s var(--ease-spring); will-change: transform;
}
.tab-hx:hover { background: rgba(255,255,255,.06); transform: scale(.98); }
.tab-hx:active { transform: scale(.92); }
.tab-hx.active {
  background: rgba(166,133,255,.11);
  border-color: rgba(166,133,255,.07);
  color: rgba(255,255,255,.8); opacity: .9;
}

.plan-card {
  width: 100%; position: relative;
  border: 2px solid rgba(255,255,255,.02);
  border-radius: 24px; overflow: hidden;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(255,255,255,.01);
  transition: all .2s var(--ease-out); will-change: transform;
}
.plan-card:hover {
  border-color: rgba(255,255,255,.04);
  backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px);
  transform: perspective(500px) rotateX(3deg) scale(1.04);
}

.plan-glow {
  position: absolute; top: 0; z-index: 1;
  will-change: transform; transform: scale(1.15);
  animation: 5s infinite anim-scale;
  opacity: 0; transition: opacity 1.4s var(--ease-spring);
}
.plan-card:hover .plan-glow { opacity: 1; }

.footer-hx {
  width: 100%; max-width: 1370px;
  border: 2px solid rgba(255,255,255,.02);
  background: rgba(255,255,255,.01);
  border-radius: 24px; padding: 18px 24px;
  margin-inline: 1rem;
  transition: border-color 1.4s var(--ease-spring);
}
.footer-hx:hover { border-color: rgba(255,255,255,.04); }
@media (min-width: 64rem) { .footer-hx { margin-inline: 0; } }

.hero-blob {
  position: absolute; z-index: 0;
  height: 100%; top: 150px; left: -30px; width: 100%;
  overflow: hidden; filter: blur(90px);
  animation: 1.3s fade-in-small;
  pointer-events: none;
}
.hero-blob-inner {
  margin-inline: auto;
  aspect-ratio: 1155/578;
  width: 72.1875rem;
  background: linear-gradient(to top right, var(--purple-400), var(--violet-700));
  opacity: 0.20;
  clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 61.26% 58.3%, 54.38% 65.27%, 47.5% 58.3%, 32.95% 32.5%, 15.25% 74.7%, 0% 69.65%, 13.32% 99.84%, 28.18% 71.58%, 76.1% 97.7%, 75.94% 46.09%);
}

.stats-sep { width: 100%; max-width: 150px; height: 1px; background: rgba(255,255,255,.05); }
@media (max-width: 63.99rem) { .stats-sep { display: none; } }

.ctor-input {
  width: 70px; text-align: right;
  background: transparent; border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 4px 8px;
  color: rgba(255,255,255,.9); font-family: var(--font-neue); font-size: 20px;
}
.ctor-label { font-family: var(--font-unbounded); font-size: 18px; color: rgba(255,255,255,.7); }
.ctor-unit  { font-family: var(--font-neue); font-size: 24px; color: rgba(255,255,255,.9); width: 50px; text-align: right; }

.alert { padding: 12px 16px; border-radius: 12px; font-size: 14px; margin-bottom: 16px; }
.alert-success { background: rgba(148,255,18,.08); border: 1px solid rgba(148,255,18,.2); color: #94ff12; }
.alert-danger  { background: rgba(255,18,18,.08);  border: 1px solid rgba(255,18,18,.2);  color: #ff6a6a; }
.alert-info    { background: rgba(166,133,255,.08); border: 1px solid rgba(166,133,255,.2); color: var(--violet-400); }

.auth-card {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
  border-radius: 24px; padding: 40px 36px; width: 100%; max-width: 440px;
}

.input-hx {
  width: 100%; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 14px 16px; font-size: 15px; font-family: var(--font-unbounded);
  color: rgba(255,255,255,.9); transition: border-color .3s;
}
.input-hx:focus { border-color: rgba(166,133,255,.4); outline: none; }
.input-hx::placeholder { color: rgba(255,255,255,.3); }

select.input-hx {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.input-hx option,
select option {
  background: #1a1a22;
  color: rgba(255,255,255,.9);
}

.label-hx { font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 6px; display: block; }

.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse-dot 2s infinite; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-family: var(--font-unbounded); }
.badge-open   { background: rgba(166,133,255,.12); border: 1px solid rgba(166,133,255,.25); color: var(--violet-400); }
.badge-closed { background: rgba(255,255,255,.05);  border: 1px solid rgba(255,255,255,.1);   color: rgba(255,255,255,.4); }
.badge-pending{ background: rgba(255,200,0,.08);    border: 1px solid rgba(255,200,0,.2);      color: #ffc800; }

.tbl { width: 100%; border-collapse: collapse; font-family: var(--font-unbounded); font-size: 14px; }
.tbl th { color: rgba(255,255,255,.4); font-weight: 400; padding: 10px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.05); }
.tbl td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.03); color: rgba(255,255,255,.8); }
.tbl tr:hover td { background: rgba(255,255,255,.02); }

.sidebar {
  width: 220px; flex-shrink: 0;
  background: rgba(255,255,255,.01);
  border-right: 1px solid rgba(255,255,255,.04);
  padding: 24px 16px; min-height: 100vh;
  display: flex; flex-direction: column; gap: 6px;
}
.sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  font-size: 14px; color: rgba(255,255,255,.45);
  cursor: pointer; transition: all .2s;
}
.sidebar-item:hover { background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); }
.sidebar-item.active { background: rgba(166,133,255,.1); border: 1px solid rgba(166,133,255,.12); color: rgba(166,133,255,.9); }

.balance-card {
  background: rgba(166,133,255,.06); border: 1px solid rgba(166,133,255,.12);
  border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 8px;
}
.balance-amount { font-family: var(--font-neue); font-size: 42px; color: rgba(255,255,255,.95); }
.balance-label  { font-size: 13px; color: rgba(255,255,255,.4); }

.nav-hx {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,6,6,.8); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.04);
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { font-family: var(--font-unbounded); font-size: 20px; font-weight: 700; color: rgba(255,255,255,.9); }

.msg-bubble {
  padding: 14px 18px; border-radius: 16px; max-width: 80%;
  font-size: 14px; line-height: 1.6;
}
.msg-user   { background: rgba(166,133,255,.12); border: 1px solid rgba(166,133,255,.15); align-self: flex-end; }
.msg-staff  { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); align-self: flex-start; }
.msg-time   { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 4px; }

.btn-admin {
  padding: 8px 14px; border-radius: 10px; font-size: 13px;
  border: 1px solid; cursor: pointer; transition: all .2s;
  font-family: var(--font-unbounded);
}
.btn-admin-primary { border-color: rgba(166,133,255,.3); color: var(--violet-400); background: rgba(166,133,255,.07); }
.btn-admin-primary:hover { background: rgba(166,133,255,.15); }
.btn-admin-danger  { border-color: rgba(255,80,80,.3); color: #ff5050; background: rgba(255,80,80,.06); }
.btn-admin-danger:hover { background: rgba(255,80,80,.12); }

.select-none { user-select: none; -webkit-user-select: none; }
.select-text { user-select: text; }
.transform-gpu { transform: translateZ(0); }
.will-change-transform { will-change: transform; }
.will-change-backdrop { will-change: backdrop-filter; }
.overflow-hidden { overflow: hidden; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.underline-offset-2 { text-underline-offset: 2px; }

.font-unbounded { font-family: var(--font-unbounded); }
.font-neue      { font-family: var(--font-neue); }

.text-violet   { color: var(--violet-400); }
.text-cyan     { color: var(--cyan-400); }
.text-dim      { color: rgba(255,255,255,.4); }
.text-mid      { color: rgba(255,255,255,.65); }
.text-bright   { color: rgba(255,255,255,.9); }
.text-neutral  { color: var(--neutral-400); }

.plans-grid {
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  gap: 24px;
}
@media (min-width: 64rem) {
  .plans-grid { flex-direction: row; gap: 32px; }
}

.heading-hero {
  font-family: var(--font-unbounded);
  font-size: 32px; line-height: 40px; font-weight: 600;
  color: rgba(255,255,255,.85);
}
@media (min-width: 40rem) { .heading-hero { font-size: 40px; line-height: 50px; } }
@media (min-width: 48rem) { .heading-hero { font-size: 50px; line-height: 60px; } }
@media (min-width: 64rem) { .heading-hero { font-size: 60px; line-height: 70px; } }

.accent-cyan   { color: rgba(0,210,239,.8);  filter: drop-shadow(0 0 30px rgba(0,184,219,.6)); }
.accent-purple { color: rgba(192,126,255,.85); filter: drop-shadow(0 0 50px #ad46ff); }

.desc-hero {
  font-family: var(--font-unbounded);
  font-size: 16px; color: rgba(255,255,255,.7);
}
@media (min-width: 40rem) { .desc-hero { font-size: 20px; } }
@media (min-width: 48rem) { .desc-hero { font-size: 25px; } }
@media (min-width: 64rem) { .desc-hero { font-size: 29px; } }
.desc-hero .fn { font-family: var(--font-neue); }
@media (min-width: 40rem) { .desc-hero .fn { font-size: 25px; } }
@media (min-width: 48rem) { .desc-hero .fn { font-size: 30px; } }
@media (min-width: 64rem) { .desc-hero .fn { font-size: 36px; } }

.desc-accent { color: rgba(166,133,255,.9); }

@media (hover: hover) {
  .group:hover .group-hover\:scale-115   { scale: 115%; }
  .group:hover .group-hover\:opacity-100 { opacity: 1; }
  .hover\:scale-98:hover  { scale: 98%; }
  .hover\:scale-99:hover  { scale: 99%; }
  .hover\:opacity-90:hover { opacity: .9; }

  .hover\:border-white4:hover  { border-color: rgba(255,255,255,.04); }
  .hover\:border-zinc7:hover   { border-color: rgba(82,82,92,.07); }
  .hover\:border-zinc10:hover  { border-color: rgba(82,82,92,.10); }

  .hover\:bg-violet10:hover    { background-color: rgba(196,180,255,.10); }
  .hover\:bg-white6:hover      { background-color: rgba(255,255,255,.09); }

  .hover\:text-violet85:hover  { color: rgba(237,233,254,.85); }
  .hover\:text-white60:hover   { color: rgba(255,255,255,.60); }
  .hover\:text-white70:hover   { color: rgba(255,255,255,.70); }

  .hover\:backdrop-blur-100:hover {
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
  }
}

.active\:scale-92:active { scale: 92%; }
.active\:scale-94:active { scale: 94%; }

.no-spinner { -webkit-appearance:textfield; -moz-appearance:textfield; appearance:textfield; }
.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

.opacity-0   { opacity: 0; }
.opacity-20  { opacity: .20; }
.opacity-90  { opacity: .90; }

.scale-115 { scale: 115%; }

.top-150    { top: 150px; }
.left-n30   { left: -30px; }

.border-w2  { border-color: rgba(255,255,255,.05); }

.border-w4  { border-color: rgba(255,255,255,.10); }

.border-v7  { border-color: rgba(166,133,255,.12); }

.border-z5  { border-color: rgba(82,82,92,.13); }

.bg-w1  { background-color: rgba(255,255,255,.03); }

.bg-w2  { background-color: rgba(255,255,255,.05); }

.bg-w5  { background-color: rgba(255,255,255,.13); }

.bg-w10 { background-color: rgba(255,255,255,.26); }

.bg-v6  { background-color: rgba(166,133,255,.15); }

.bg-v11 { background-color: rgba(166,133,255,.28); }

.text-w40 { color: rgba(255,255,255,.40); }

.text-w50 { color: rgba(255,255,255,.50); }

.text-w60 { color: rgba(255,255,255,.60); }

.text-w65 { color: rgba(255,255,255,.65); }

.text-w70 { color: rgba(255,255,255,.70); }

.text-w80 { color: rgba(255,255,255,.80); }

.text-w85 { color: rgba(255,255,255,.85); }

.text-w90 { color: rgba(255,255,255,.90); }

.text-n94  { color: rgba(212,212,212,.94); }

.text-cyan80 { color: rgba(0,210,239,.80); }

.text-pur85  { color: rgba(192,126,255,.85); }

.text-v165   { color: rgba(237,233,254,.65); }

.text-v490   { color: rgba(166,133,255,.90); }

.text-v5     { color: rgba(142,67,255,1); }

.text-n400   { color: #b4b4b4; }

.drop-cyan   { filter: drop-shadow(0 0 30px #00b8db99); }
.drop-violet { filter: drop-shadow(0 0 50px #ad46ff); }

.clip-hero {
  clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 61.26% 58.3%, 54.38% 65.27%, 47.5% 58.3%, 32.95% 32.5%, 15.25% 74.7%, 0% 69.65%, 13.32% 99.84%, 28.18% 71.58%, 76.1% 97.7%, 75.94% 46.09%);
}

.screen {
  display:flex; justify-content:center; align-items:flex-start;
  width:100%; height:100vh;
}
.screen-container {
  display:flex; flex-direction:column; justify-content:flex-start;
  align-items:center; width:100%; height:100%;
}
@media (min-width:64rem)  { .screen-container { max-width:1000px; } }
@media (min-width:80rem)  { .screen-container { max-width:1300px; } }
@media (min-width:96rem)  { .screen-container { max-width:1650px; } }

.lg-only { display:none; }
@media (min-width:64rem) {
  .lg-only      { display:block; }
  .lg-flex      { display:flex; }
  .lg-flex-row  { flex-direction:row !important; }
  .lg-mx-0      { margin-inline:0; }
  .lg-px-0      { padding-inline:0; }
  .lg-gap-0     { gap:0; }
  .lg-gap-24    { gap:24px; }
  .lg-gap-32    { gap:32px; }
  .lg-gap-48    { gap:48px; }
  .lg-text-left { text-align:left; }
}
@media (min-width:40rem) {
  .sm-flex-row  { flex-direction:row !important; }
  .sm-gap-18    { gap:18px; }
  .sm-gap-24    { gap:24px; }
  .sm-gap-48    { gap:48px; }
}

.gradient-hero {
  background-image: linear-gradient(
    to top right in oklab,
    oklch(71.4% .203 305.504),
    oklch(49.1% .27  292.581)
  );
}

.plans-grid { align-items: stretch; }
.plans-grid .plan-card { height: 100%; }

.order-plans-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap: 24px;
  align-items: stretch;
  width: 100%;
}
.order-plans-grid .plan-card { height: 100%; min-width: 0; }
@media (min-width: 64rem) { .order-plans-grid { gap: 32px; } }

.order-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.order-detail-card { min-width: 0; }
.order-detail-form { min-width: 0; }
@media (min-width: 48rem) {
  .order-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
}

.plan-cta {
  border: 1px solid rgba(166,133,255,.07);
  background: rgba(166,133,255,.06);
  padding: 12px 20px;
  border-radius: 20px;
  cursor: pointer;
  color: rgba(237,233,254,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-family: var(--font-unbounded);
  font-size: 18px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(.175,.885,.32,1.275);
  will-change: transform;
}
.plan-cta:hover {
  background: rgba(196,180,255,.1);
  color: rgba(237,233,254,.85);
  opacity: .9;
  transform: scale(.98);
}
.plan-cta:active { transform: scale(.92); }

/* ============================================================
 * Мобильная адаптация (≤48rem / 768px). Перебивает inline-стили
 * через !important, потому что 90% размеров в шаблонах — inline.
 * См. CLAUDE.md секция «UI / стилевые конвенции».
 * ============================================================ */

@media (max-width: 48rem) {

  /* Контейнеры */
  .mp-c2 { padding-inline: 16px !important; }

  /* Auth-карточка: на узком экране 40px padding съедает половину ширины */
  .auth-card { padding: 28px 20px !important; border-radius: 18px; }

  /* Кнопки */
  .btn-ghost { padding: 14px 22px !important; font-size: 16px !important; gap: 10px !important; border-radius: 20px; }
  .btn-hx    { padding: 11px 18px; font-size: 15px; gap: 9px; }

  /* Таб-бар */
  .tabs-hx { gap: 6px !important; padding: 8px 8px !important; border-radius: 22px; }
  .tab-hx  { padding: 9px 14px !important; font-size: 14px !important; gap: 8px !important; border-radius: 16px; }
  .tab-hx svg { width: 18px; height: 18px; }

  /* Hero уже даунгрейдит — но поправим жирные SVG в кнопках */
  .btn-ghost svg { width: 20px; height: 20px; flex-shrink: 0; }

  /* Конструктор — слайдеры */
  .ctor-input { width: 56px !important; font-size: 16px; padding: 6px 8px; }
  .ctor-unit  { width: 36px !important; font-size: 18px; }
  .ctor-label { font-size: 15px; }

  /* Балансная карточка */
  .balance-card  { padding: 20px !important; border-radius: 16px; }
  .balance-amount { font-size: 32px !important; }

  /* Таблицы — горизонтальный скролл вместо переполнения */
  .tbl { font-size: 13px; }
  .tbl th, .tbl td { padding: 10px 10px !important; }

  /* Шапка */
  .nav-hx { padding: 12px 16px; }
  .nav-logo { font-size: 18px; }

  /* Flash-контейнер */
  #flash-container { right: 8px !important; left: 8px !important; max-width: calc(100vw - 16px) !important; }

  /* Алерты */
  .alert { padding: 10px 14px; font-size: 13px; border-radius: 10px; }

  /* Плэн-карточки */
  .plan-card:hover { transform: none; }  /* без 3D-перспективы на тач */

  /* Футер */
  .footer-hx { padding: 16px !important; margin-inline: 12px; border-radius: 18px; }

  /* Большие inline-padding на карточках: backdrop модалок */
  [data-modal-backdrop] > div,
  [data-modal-backdrop] > form { max-width: calc(100vw - 24px) !important; }

  /* Гостевая шапка (logo + Войти/Регистрация) */
  .nav-hx > div { gap: 6px !important; flex-wrap: wrap; justify-content: flex-end; }
  .nav-hx .btn-hx, .nav-hx .btn-ghost { padding: 8px 14px !important; font-size: 13px !important; }
}

/* Очень узкие — менее 30rem / 480px */
@media (max-width: 30rem) {

  .auth-card { padding: 22px 16px !important; }

  /* Hero-блок на лендинге: убираем фиксированную высоту + сдвиг блоба */
  .hero-blob { left: 0 !important; width: 100% !important; }

  /* Конструктор / VDS-конструктор колонки — обязательный стек */
  .ctor-row { flex-direction: column !important; gap: 24px !important; }
  .ctor-row .ctor-preview-col { max-width: 100% !important; width: 100% !important; align-self: stretch !important; }

  /* Статистика — стек, центрирование */
  .stats-row { flex-direction: column !important; gap: 18px !important; height: auto !important; padding-block: 12px; }
  .stats-row > div > div { align-items: flex-start; }
  .stats-row [id^="stat-"] { font-size: 30px !important; }

  /* Hero-секция: высота auto, кнопки на всю ширину */
  .hero-row { height: auto !important; gap: 24px !important; }
  .hero-cta-row { gap: 12px !important; }
  .hero-cta-row .btn-ghost { padding: 12px 18px !important; font-size: 14px !important; }

  /* Заголовки страниц (24px inline) сжать */
  .page-title { font-size: 20px !important; }

  /* Полностраничный отступ от nav */
  .mp-c1[style*="margin-top:50px"] { margin-top: 24px !important; }
  .mp-c1[style*="margin-top:32px"] { margin-top: 20px !important; }
}

/* Совсем узкие — менее 22rem / 352px (например iPhone SE 1) */
@media (max-width: 22rem) {
  .mp-c2 { padding-inline: 12px !important; }
  .auth-card { padding: 18px 12px !important; }
  .tab-hx { padding: 7px 10px !important; font-size: 13px !important; }
  .input-hx { padding: 12px 12px; font-size: 14px; }
}


/* Обёртка для широких таблиц — даёт горизонтальный скролл вместо переполнения */
.tbl-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}
.tbl-wrap .tbl { min-width: 100%; }

@media (max-width: 48rem) {
  .tbl-wrap .tbl { min-width: 640px; }
  .tbl-wrap .tbl th, .tbl-wrap .tbl td { white-space: nowrap; }

  /* Утилитарный мобильный стек для inline двух-/трёх-колоночных гридов.
     Применяется через class="mobile-stack" на родительском div со встроенным grid. */
  .mobile-stack { grid-template-columns: 1fr !important; }

  /* Гриды Pterodactyl-карточек юзера (admin/user.php) */
  .user-info-grid { grid-template-columns: 1fr !important; }

  /* Кнопки сумм пополнения (billing/index.php) — 6 кнопок на узком экране = 3+3 */
  .topup-amount-btn { flex: 0 1 calc(33.333% - 6px) !important; min-width: 0 !important; }

  /* Большие цены в визарде заказа */
  .price-big   { font-size: 24px !important; }
  .price-huge  { font-size: 26px !important; }

  /* Двухколоночный layout view.php — сайдбар + чат */
  .ticket-view-grid { grid-template-columns: 1fr !important; }

  /* Промокод-форма: инпут + кнопка вертикально */
  .promo-form-row { flex-direction: column !important; align-items: stretch !important; }
  .promo-form-row .promo-apply-btn { width: 100% !important; padding: 10px !important; }

  /* Date-input фильтра /billing min-width:160px → auto */
  .date-filter-input { min-width: 0 !important; flex: 1 1 140px !important; }

  /* Превью аттачментов в тикетах */
  .ticket-attach-preview { width: 110px !important; height: 80px !important; }

  /* Поиск /admin/users — input width:220px → 100% */
  .admin-search-input { width: 100% !important; max-width: 220px !important; }

  /* Транзакции — сумма не должна резервировать 120px */
  .tx-amount { min-width: 0 !important; }

  /* Egg-чекбоксы в /admin/settings */
  .eggs-checkboxes { padding-left: 0 !important; gap: 8px 12px !important; }
  .egg-checkbox-label { min-width: 0 !important; }
}

@media (max-width: 30rem) {
  /* На очень узком — даже padding модалок ужать */
  [data-modal-backdrop] > div,
  [data-modal-backdrop] > form { padding: 18px !important; }

  /* Резервные коды 2FA: 2 колонки → 1 */
  .backup-codes-grid { grid-template-columns: 1fr !important; }
}