*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background-color: #07070d;
  background-image:
    radial-gradient(900px 500px at 8% 20%, rgba(168, 85, 247, 0.18), transparent 60%),
    radial-gradient(700px 500px at 92% 80%, rgba(236, 72, 153, 0.10), transparent 60%),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(135deg, #07070d 0%, #0b0b16 100%);
  background-size: auto, auto, 36px 36px, 36px 36px, auto;
  color: #e0e0f0;
}
a { color: inherit; }
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  background: linear-gradient(135deg, rgba(15,15,25,.88), rgba(20,20,32,.88));
  border-bottom: 1px solid rgba(168,85,247,.25);
  box-shadow: 0 2px 18px rgba(168,85,247,.10);
}
.brand {
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  letter-spacing: .2px;
}
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-links a {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #c9c9df;
  text-decoration: none;
  font-size: 13px;
}
.nav-links a:hover { background: rgba(168,85,247,.18); color: #fff; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0; }
.hero { text-align: center; margin: 20px auto 28px; max-width: 760px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(168,85,247,.30);
  border-radius: 999px;
  color: #c4b5fd;
  background: rgba(20,20,32,.7);
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: 800;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: #43b581; box-shadow: 0 0 8px #43b581; }
h1 {
  margin: 12px 0 8px;
  font-size: clamp(28px, 4.2vw, 48px);
  color: #fff;
  line-height: 1.15;
}
.grad {
  background: linear-gradient(90deg, #60a5fa 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.muted { color: #8a8bb0; line-height: 1.8; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card, .auth-card, .panel {
  background: linear-gradient(135deg, rgba(20,20,32,.78), rgba(12,12,22,.78));
  border: 1px solid rgba(168,85,247,.22);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.02);
}
.card { padding: 20px; text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
.card:hover { transform: translateY(-2px); border-color: rgba(236,72,153,.55); box-shadow: 0 18px 56px rgba(168,85,247,.22); }
.card h2 { margin: 0 0 8px; color: #fff; font-size: 20px; }
.card p { min-height: 48px; margin: 0 0 18px; color: #8a8bb0; line-height: 1.7; }
.pill {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.disabled-card { opacity: .45; pointer-events: none; }
.tool-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  padding: 21px;
  background: transparent;
}
.tool-card > * {
  position: relative;
  z-index: 2;
}
.tool-card-hot {
  box-shadow: 0 18px 54px rgba(0,0,0,.48), 0 0 36px rgba(249,115,22,.28);
}
.tool-card-vip {
  box-shadow: 0 18px 54px rgba(0,0,0,.48), 0 0 38px rgba(168,85,247,.32), 0 0 22px rgba(96,165,250,.18);
}
.tool-card::before,
.tool-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.tool-card-hot::before {
  inset: -48%;
  background: conic-gradient(from 0deg, #ef4444, #f97316, #facc15, #fb923c, #ef4444);
}
.tool-card-vip::before {
  inset: -48%;
  background: conic-gradient(from 0deg, #60a5fa, #a855f7, #ec4899, #facc15, #22d3ee, #60a5fa);
}
.tool-card-hot::after {
  inset: 2px;
  border-radius: 14px;
  background:
    radial-gradient(130px 78px at 28% 100%, rgba(250,204,21,.28), transparent 72%),
    radial-gradient(160px 88px at 68% 102%, rgba(249,115,22,.30), transparent 70%),
    linear-gradient(135deg, rgba(20,20,32,.96), rgba(12,12,22,.94));
  animation: toolHotPulse 1.7s ease-in-out infinite alternate;
}
.tool-card-vip::after {
  inset: 2px;
  border-radius: 14px;
  background:
    radial-gradient(150px 110px at 86% 12%, rgba(96,165,250,.24), transparent 72%),
    radial-gradient(170px 120px at 14% 100%, rgba(236,72,153,.19), transparent 68%),
    linear-gradient(135deg, rgba(20,20,32,.96), rgba(12,12,22,.94));
  animation: toolVipPulse 2.2s ease-in-out infinite alternate;
}
.tool-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 27px;
  margin: 0 0 12px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.tool-card-badge::after {
  content: "";
  position: absolute;
  inset: -30% -55%;
  transform: translateX(-80%) rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation: toolBadgeSweep 1.8s ease-in-out infinite;
}
.tool-card-hot .tool-card-badge {
  background: linear-gradient(135deg, #ef4444, #f97316, #facc15);
  box-shadow: 0 0 22px rgba(249,115,22,.58);
  animation: toolHotBadge 1s ease-in-out infinite alternate;
}
.tool-card-vip .tool-card-badge {
  background: linear-gradient(135deg, #60a5fa, #a855f7, #ec4899);
  box-shadow: 0 0 24px rgba(168,85,247,.62), inset 0 1px 0 rgba(255,255,255,.22);
  animation: toolVipBadge 1.45s ease-in-out infinite alternate;
}
.tool-card-hot:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 38px rgba(249,115,22,.34);
}
.tool-card-vip:hover {
  box-shadow: 0 20px 62px rgba(0,0,0,.5), 0 0 42px rgba(168,85,247,.38), 0 0 24px rgba(96,165,250,.20);
}
@keyframes toolHotPulse {
  from { opacity: .86; filter: saturate(1); }
  to { opacity: 1; filter: saturate(1.35) brightness(1.08); }
}
@keyframes toolVipPulse {
  from { opacity: .88; filter: saturate(1); }
  to { opacity: 1; filter: saturate(1.28) brightness(1.1); }
}
@keyframes toolBadgeSweep {
  0%, 28% { transform: translateX(-82%) rotate(18deg); }
  72%, 100% { transform: translateX(82%) rotate(18deg); }
}
@keyframes toolHotBadge {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-1px) scale(1.04); }
}
@keyframes toolVipBadge {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-1px) scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card-hot,
  .tool-card-vip,
  .tool-card-hot::before,
  .tool-card-vip::before,
  .tool-card-hot::after,
  .tool-card-vip::after,
  .tool-card-badge,
  .tool-card-badge::after {
    animation: none;
  }
}
.auth-shell { width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0; }
.auth-card { padding: 26px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.form-row.full { grid-column: 1 / -1; }
label { color: #c4b5fd; font-size: 13px; font-weight: 700; }
input, select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(168,85,247,.30);
  background: rgba(10,10,20,.72);
  color: #e0e0f0;
  outline: none;
  font-size: 14px;
}
input:focus, select:focus { border-color: #ec4899; box-shadow: 0 0 0 3px rgba(236,72,153,.18); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}
.btn-primary { background: linear-gradient(135deg, #a855f7, #ec4899); color: #fff; }
.btn-muted { background: rgba(255,255,255,.06); color: #e0e0f0; border: 1px solid rgba(255,255,255,.08); }
.btn-danger { background: linear-gradient(135deg, #f04747, #e03333); color: #fff; }
.alert {
  padding: 12px 14px;
  margin: 0 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(168,85,247,.26);
  background: rgba(20,20,32,.78);
  color: #e0e0f0;
  line-height: 1.7;
}
.alert.success { background: rgba(67,181,129,.16); border-color: rgba(67,181,129,.65); color: #d7ffe8; box-shadow: 0 8px 22px rgba(67,181,129,.12); }
.alert.error { background: rgba(240,71,71,.18); border-color: rgba(240,71,71,.65); color: #ffd7d7; box-shadow: 0 8px 22px rgba(240,71,71,.12); }
.alert.warning { border-color: rgba(245,158,11,.55); color: #ffe8ba; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { padding: 16px; }
.stat span { display: block; color: #8a8bb0; font-size: 12px; }
.stat strong { display: block; margin-top: 6px; color: #fff; font-size: 26px; }
.panel { padding: 18px; margin-bottom: 16px; overflow: hidden; }
.panel h2 { margin: 0 0 14px; color: #fff; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.06); text-align: left; vertical-align: middle; }
th { color: #c4b5fd; font-size: 12px; text-transform: uppercase; background: rgba(10,10,20,.68); }
td { color: #dedeee; font-size: 13px; }
.inline-form { display: inline-flex; margin: 2px; }
.subscription-form { display: flex; gap: 6px; align-items: center; }
.subscription-form input, .subscription-form select { padding: 9px 10px; border-radius: 10px; font-size: 12px; }
.subscription-form .btn { min-height: 34px; padding: 8px 12px; font-size: 12px; }
.status { display: inline-flex; padding: 4px 9px; border-radius: 999px; font-weight: 800; font-size: 11px; }
.status.active { background: rgba(67,181,129,.18); color: #8cffba; }
.status.blocked { background: rgba(240,71,71,.18); color: #ff9a9a; }
.checkbox-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.check-card { padding: 12px; border: 1px solid rgba(168,85,247,.22); border-radius: 12px; background: rgba(10,10,20,.45); }
.check-card label { display: flex; align-items: center; gap: 8px; color: #e0e0f0; }
.check-card input { width: auto; }
.details-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.details-grid div {
  padding: 14px;
  border: 1px solid rgba(168,85,247,.18);
  border-radius: 12px;
  background: rgba(10,10,20,.45);
}
.details-grid span { display: block; color: #8a8bb0; font-size: 12px; margin-bottom: 6px; }
.details-grid strong { display: block; color: #fff; font-size: 15px; overflow-wrap: anywhere; }
.vip-dashboard .stats .panel.stat,
.vip-dashboard .account-details,
.vip-dashboard .account-details .details-grid div,
.vip-dashboard .dash-sub-panel,
.vip-dashboard .dash-sub-panel .details-grid div,
.vip-dashboard .dashboard-tools-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(168,85,247,.58);
  background:
    linear-gradient(135deg, rgba(20,20,32,.90), rgba(12,12,22,.84)),
    radial-gradient(150px 86px at 0% 0%, rgba(168,85,247,.18), transparent 72%),
    radial-gradient(160px 96px at 100% 0%, rgba(236,72,153,.12), transparent 74%);
  box-shadow:
    0 18px 50px rgba(0,0,0,.48),
    0 0 0 1px rgba(236,72,153,.14),
    0 0 32px rgba(168,85,247,.22),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 32px rgba(168,85,247,.15),
    inset 0 0 46px rgba(236,72,153,.08);
}
.vip-dashboard .stats .panel.stat::before,
.vip-dashboard .account-details::before,
.vip-dashboard .account-details .details-grid div::before,
.vip-dashboard .dash-sub-panel::before,
.vip-dashboard .dash-sub-panel .details-grid div::before,
.vip-dashboard .dashboard-tools-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(180px 105px at 10% 12%, rgba(168,85,247,.26), transparent 70%),
    radial-gradient(190px 110px at 90% 10%, rgba(236,72,153,.18), transparent 72%),
    radial-gradient(230px 130px at 50% 100%, rgba(96,165,250,.14), transparent 74%);
  border-radius: inherit;
  opacity: .78;
  animation: vipNeonBreathe 4.8s ease-in-out infinite;
}
.vip-dashboard .stats .panel.stat::after,
.vip-dashboard .account-details::after,
.vip-dashboard .account-details .details-grid div::after,
.vip-dashboard .dash-sub-panel::after,
.vip-dashboard .dash-sub-panel .details-grid div::after,
.vip-dashboard .dashboard-tools-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border: 1px solid rgba(196,181,253,.09);
  border-radius: inherit;
  box-shadow:
    inset 0 0 20px rgba(168,85,247,.17),
    inset 0 0 36px rgba(236,72,153,.11),
    inset 0 0 54px rgba(96,165,250,.08);
  animation: vipNeonRing 5.4s ease-in-out infinite;
}
.vip-dashboard .stats .panel.stat > *,
.vip-dashboard .account-details > *,
.vip-dashboard .account-details .details-grid div > *,
.vip-dashboard .dash-sub-panel > *,
.vip-dashboard .dash-sub-panel .details-grid div > *,
.vip-dashboard .dashboard-tools-panel > * {
  position: relative;
  z-index: 1;
}
.vip-dashboard .stats .panel.stat span,
.vip-dashboard .details-grid span,
.vip-dashboard .account-details summary,
.vip-dashboard .dashboard-tools-panel > h2 {
  color: #d8b4fe;
  text-shadow: 0 0 10px rgba(168,85,247,.38), 0 0 18px rgba(236,72,153,.14);
}
.vip-dashboard .stats .panel.stat strong,
.vip-dashboard .details-grid strong {
  color: #fbf7ff;
  text-shadow: 0 0 12px rgba(168,85,247,.28), 0 0 20px rgba(96,165,250,.12);
}
.vip-dashboard .dashboard-tools-panel {
  border-color: rgba(168,85,247,.70);
  box-shadow:
    0 18px 50px rgba(0,0,0,.48),
    0 0 0 1px rgba(236,72,153,.16),
    0 0 42px rgba(168,85,247,.26),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 50px rgba(168,85,247,.14),
    inset 0 0 68px rgba(236,72,153,.08);
}
@keyframes vipNeonBreathe {
  0%, 100% { opacity: .58; filter: saturate(1) brightness(.98); }
  50% { opacity: .94; filter: saturate(1.26) brightness(1.08); }
}
@keyframes vipNeonRing {
  0%, 100% { opacity: .62; }
  50% { opacity: .95; }
}
.account-details summary {
  cursor: pointer;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  list-style: none;
}
.account-details summary::-webkit-details-marker { display: none; }
.account-details summary::after {
  content: "+";
  float: right;
  color: #ec4899;
  font-size: 22px;
  line-height: 1;
}
.account-details[open] summary { margin-bottom: 14px; }
.account-details[open] summary::after { content: "-"; }
.site-footer {
  width: min(1180px, calc(100% - 32px));
  margin: 24px auto 26px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #8a8bb0;
  font-size: 13px;
  flex-wrap: wrap;
}
/* Brand badge */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 14px;
  background: linear-gradient(135deg, rgba(167, 139, 250, .08) 0%, rgba(244, 114, 182, .06) 100%);
  border: 1px solid rgba(167, 139, 250, .18);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(167, 139, 250, .4);
}
.brand-logo svg { width: 13px; height: 13px; }
.brand-name {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .3px;
  color: #e6e7ee;
}
.brand-accent {
  background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.15);
}
.brand-by {
  color: #8a8bb0;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.brand-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  text-decoration: none;
  color: #e6e7ee;
  font-size: 12px;
  font-weight: 700;
  transition: all .2s ease;
}
.brand-author:hover {
  background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(167, 139, 250, .4);
}
.brand-author-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -.5px;
}
.brand-author:hover .brand-author-avatar { background: rgba(255,255,255,.25); }
.brand-author-name { letter-spacing: .2px; }
.brand-author-arrow {
  width: 11px;
  height: 11px;
  opacity: .6;
  transition: all .2s ease;
}
.brand-author:hover .brand-author-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}
.plan-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-card { display: flex; flex-direction: column; padding: 24px; text-align: center; }
.plan-card .plan-header { margin-bottom: 10px; }
.plan-card .plan-header h2 { margin: 0; font-size: 24px; }
.plan-card .plan-type {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(168,85,247,.18);
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 800;
}
.plan-card .plan-price {
  margin: 14px 0 18px;
}
.plan-card .plan-price strong {
  font-size: 36px;
  color: #fff;
}
.plan-card .plan-price span {
  color: #8a8bb0;
  font-size: 14px;
}
.plan-card .plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  text-align: left;
  flex: 1;
}
.plan-card .plan-features li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #c9c9df;
  font-size: 14px;
  position: relative;
  padding-left: 22px;
}
.plan-card .plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #43b581;
  font-weight: 800;
}
.plan-card .plan-features li:last-child { border-bottom: none; }
.plan-card .plan-action { margin-top: auto; }
.plan-card .plan-action .btn { width: 100%; }
.plan-highlight {
  border-color: rgba(236,72,153,.55);
  box-shadow: 0 18px 56px rgba(168,85,247,.22);
  transform: scale(1.02);
}
@media (max-width: 840px) {
  .cards, .stats, .form-grid, .checkbox-list, .details-grid { grid-template-columns: 1fr; }
  .site-nav { align-items: flex-start; flex-direction: column; }
  .site-footer { flex-direction: column; text-align: center; }
}