:root {
  --wolf-bg: #050b14;
  --wolf-panel: #0b1422;
  --wolf-panel-2: #101b2c;
  --wolf-line: rgba(139, 184, 224, .16);
  --wolf-line-strong: rgba(80, 206, 255, .28);
  --wolf-text: #f5f8ff;
  --wolf-muted: #8fa3ba;
  --wolf-cyan: #35d9ff;
  --wolf-blue: #4f9dff;
  --wolf-violet: #8258ff;
  --wolf-green: #44e3a4;
  --wolf-radius: 18px;
  --wolf-shadow: 0 28px 80px rgba(0, 0, 0, .3);
}

body.wolf-ui {
  --bg: var(--wolf-bg);
  --surface: var(--wolf-panel);
  --surface2: var(--wolf-panel-2);
  --line: var(--wolf-line);
  --text: var(--wolf-text);
  --muted: var(--wolf-muted);
  --accent: var(--wolf-cyan);
  background:
    radial-gradient(circle at 78% 2%, rgba(54, 87, 184, .14), transparent 30rem),
    radial-gradient(circle at 10% 45%, rgba(17, 170, 217, .08), transparent 32rem),
    var(--wolf-bg);
  color: var(--wolf-text);
  min-height: 100vh;
}

.wolf-ui a { color: inherit; }
.wolf-ui .muted, .wolf-ui .help, .wolf-ui small { color: var(--wolf-muted); }
.wolf-ui .card,
.wolf-ui .panel,
.wolf-ui .meridian-details,
.wolf-ui .renewal-period,
.wolf-ui .subscription-renewal,
.wolf-ui .device-upgrade {
  background: linear-gradient(145deg, rgba(16, 28, 45, .94), rgba(8, 17, 29, .96)) !important;
  border-color: var(--wolf-line) !important;
  border-radius: var(--wolf-radius) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .17) !important;
}

.wolf-ui .field,
.wolf-ui input,
.wolf-ui select,
.wolf-ui textarea {
  background: rgba(4, 12, 23, .72);
  border-color: var(--wolf-line);
  color: var(--wolf-text);
}

.wolf-ui .field:focus,
.wolf-ui input:focus,
.wolf-ui select:focus,
.wolf-ui textarea:focus {
  border-color: var(--wolf-cyan);
  box-shadow: 0 0 0 3px rgba(53, 217, 255, .12);
}

.wolf-ui .button {
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(112deg, var(--wolf-cyan), #62b7ff 55%, #8d6cff) !important;
  color: #03111c !important;
  box-shadow: 0 10px 30px rgba(55, 190, 255, .18);
  font-weight: 750;
}

.wolf-ui .button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.wolf-ui .button.secondary {
  color: var(--wolf-text) !important;
  background: rgba(27, 44, 66, .58) !important;
  border: 1px solid var(--wolf-line-strong) !important;
  box-shadow: none;
}

.wolf-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f7f9ff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.04em;
  text-decoration: none;
}

.wolf-brand img { object-fit: contain; filter: drop-shadow(0 0 12px rgba(59, 199, 255, .3)); }
.wolf-brand b { color: var(--wolf-cyan); }

/* Authenticated application shell */
.wolf-app-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.wolf-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: 232px;
  display: flex;
  flex-direction: column;
  padding: 24px 18px 18px;
  background: linear-gradient(180deg, rgba(8, 18, 31, .98), rgba(5, 12, 22, .98));
  border-right: 1px solid var(--wolf-line);
}

.wolf-sidebar .wolf-brand { padding: 0 8px 24px; }
.wolf-sidebar .wolf-brand img { width: 36px; height: 36px; }
.wolf-side-nav { display: grid; gap: 5px; }
.wolf-side-nav a,
.wolf-side-bottom a,
.wolf-side-bottom button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #8fa2b8;
  background: transparent;
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}

.wolf-side-nav i,
.wolf-side-bottom i { font-size: 19px; color: #9bb3cc; }
.wolf-side-nav a:hover,
.wolf-side-bottom a:hover,
.wolf-side-bottom button:hover { color: #fff; background: rgba(69, 117, 169, .11); }
.wolf-side-nav a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(100deg, rgba(46, 184, 255, .17), rgba(93, 96, 221, .13));
  border-color: rgba(76, 188, 255, .16);
}
.wolf-side-nav a[aria-current="page"] i { color: var(--wolf-cyan); }
.wolf-side-bottom { display: grid; gap: 4px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--wolf-line); }
.wolf-side-bottom form { margin: 0; }
.wolf-side-bottom b { margin-left: auto; color: #03111c; background: var(--wolf-cyan); border-radius: 999px; padding: 2px 7px; font-size: 11px; }

.wolf-main-column { grid-column: 2; min-width: 0; }
.wolf-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  background: rgba(5, 12, 22, .78);
  border-bottom: 1px solid var(--wolf-line);
  backdrop-filter: blur(18px);
}
.wolf-topbar-title { display: grid; gap: 2px; }
.wolf-topbar-title span { font-size: 14px; font-weight: 700; }
.wolf-topbar-title small { font-size: 11px; }
.wolf-topbar-actions { display: flex; align-items: center; gap: 12px; }
.wolf-icon-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--wolf-line); border-radius: 12px; text-decoration: none; }
.wolf-user-chip { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-size: 13px; }
.wolf-user-chip > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--wolf-cyan), var(--wolf-violet)); color: #06101c; font-weight: 800; }
.wolf-user-chip i { color: var(--wolf-muted); }
.wolf-mobile-nav { display: none; }
.wolf-authenticated main { min-height: calc(100vh - 72px); }
.wolf-authenticated .container { width: min(1180px, calc(100% - 56px)); }
.wolf-authenticated .cabinet-page { padding: 28px 0 72px; }
.wolf-authenticated .meridian-cabinet-nav { display: none; }

/* Dashboard */
.wolf-dashboard { display: grid; gap: 16px; margin-bottom: 28px; }
.wolf-welcome {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 32px 40% 32px 34px;
  border: 1px solid var(--wolf-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% 40%, rgba(60, 109, 255, .28), transparent 16rem),
    linear-gradient(115deg, rgba(13, 27, 45, .98), rgba(8, 17, 30, .94));
  box-shadow: var(--wolf-shadow);
}
.wolf-welcome::after { content: ""; position: absolute; inset: auto 8% -120px auto; width: 420px; height: 250px; background: rgba(45, 183, 255, .12); filter: blur(70px); border-radius: 50%; }
.wolf-welcome > div { position: relative; z-index: 2; }
.wolf-welcome > img { position: absolute; z-index: 1; right: 1.5%; bottom: -87px; width: min(37%, 390px); height: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .5)); }
.wolf-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--wolf-cyan); font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.wolf-welcome h1 { margin: 12px 0 8px; color: #fff; font-size: clamp(30px, 3.1vw, 45px); line-height: 1.02; letter-spacing: -.045em; }
.wolf-welcome h1 span { font-size: .7em; }
.wolf-welcome p { max-width: 550px; margin: 0; color: #aab9c9; font-size: 14px; line-height: 1.6; }
.wolf-welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 23px; }

.wolf-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(210px, .68fr) minmax(240px, .85fr); gap: 16px; }
.wolf-dashboard-grid > article {
  min-width: 0;
  min-height: 200px;
  padding: 22px;
  border: 1px solid var(--wolf-line);
  border-radius: var(--wolf-radius);
  background: linear-gradient(145deg, rgba(16, 29, 47, .96), rgba(7, 16, 28, .98));
  box-shadow: 0 20px 48px rgba(0, 0, 0, .19);
}
.wolf-card-label { display: flex; align-items: center; justify-content: space-between; color: #dce8f7; font-size: 13px; font-weight: 700; }
.wolf-card-label span { display: flex; align-items: center; gap: 7px; }
.wolf-card-label i { color: var(--wolf-cyan); font-size: 18px; }
.wolf-status-card { border-color: rgba(50, 211, 183, .24) !important; }
.wolf-status-body { display: flex; align-items: flex-end; gap: 25px; margin-top: 23px; }
.wolf-status-body > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.wolf-status-body strong { font-size: 52px; line-height: .9; letter-spacing: -.06em; }
.wolf-status-body span { color: var(--wolf-muted); font-size: 12px; }
.wolf-plan-meta { display: grid; gap: 3px; padding-bottom: 3px; }
.wolf-plan-meta b { font-size: 14px; }
.wolf-progress { height: 4px; margin: 18px 0; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.wolf-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--wolf-green), var(--wolf-cyan), var(--wolf-violet)); border-radius: inherit; }
.wolf-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.wolf-card-actions .button { min-height: 39px; font-size: 12px; }
.wolf-balance-card > strong { display: block; margin: 24px 0 7px; font-size: 33px; letter-spacing: -.04em; }
.wolf-balance-card p { min-height: 38px; color: var(--wolf-muted); font-size: 11px; line-height: 1.5; }
.wolf-balance-card > a { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--wolf-cyan); font-size: 12px; text-decoration: none; }
.wolf-referral-card { position: relative; display: flex; align-items: stretch; overflow: hidden; background: radial-gradient(circle at 100% 60%, rgba(117, 73, 255, .33), transparent 58%), linear-gradient(145deg, rgba(18, 28, 50, .98), rgba(7, 15, 27, .98)) !important; }
.wolf-referral-card > div { position: relative; z-index: 2; width: 70%; }
.wolf-referral-card h2 { margin: 10px 0 8px; font-size: 20px; line-height: 1.12; }
.wolf-referral-card p { margin-bottom: 16px; color: var(--wolf-muted); font-size: 10px; }
.wolf-referral-card .button { min-height: 35px; padding: 0 13px; font-size: 11px; }
.wolf-referral-card img { position: absolute; right: -14px; bottom: -21px; width: 134px; height: auto; }

.wolf-quick-section { padding: 22px; border: 1px solid var(--wolf-line); border-radius: var(--wolf-radius); background: rgba(9, 18, 31, .8); }
.wolf-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.wolf-section-title span { color: var(--wolf-cyan); font-size: 11px; font-weight: 700; }
.wolf-section-title h2 { margin: 3px 0 0; font-size: 17px; }
.wolf-section-title > a { display: flex; align-items: center; gap: 6px; color: #a8c5e0; font-size: 11px; text-decoration: none; }
.wolf-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wolf-quick-grid a { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px; border: 1px solid var(--wolf-line); border-radius: 13px; background: linear-gradient(145deg, rgba(19, 32, 51, .72), rgba(8, 16, 27, .78)); text-decoration: none; }
.wolf-quick-grid a:hover { border-color: var(--wolf-line-strong); transform: translateY(-1px); }
.wolf-quick-grid i { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: rgba(45, 191, 255, .1); color: var(--wolf-cyan); font-size: 20px; }
.wolf-quick-grid span { font-size: 12px; font-weight: 650; line-height: 1.35; }

.wolf-authenticated .cabinet-section-head { margin-top: 34px; }
.wolf-authenticated .cabinet-subscription-card { border-radius: var(--wolf-radius); }
.wolf-authenticated .meridian-page-head { margin-top: 10px; padding: 28px; border: 1px solid var(--wolf-line); border-radius: var(--wolf-radius); background: linear-gradient(135deg, rgba(17, 30, 48, .88), rgba(8, 17, 29, .92)); }
.wolf-authenticated .meridian-page-head h1 { color: #fff; }
.wolf-authenticated .eyebrow { color: var(--wolf-cyan); }

/* Public and authorization surfaces */
.wolf-public-header { background: rgba(5, 12, 22, .82); border-color: var(--wolf-line); backdrop-filter: blur(18px); }
.wolf-public-header nav a { color: #adbed0; }
.wolf-public .site-footer { background: #050b14; border-color: var(--wolf-line); }
.wolf-public .meridian-hero,
.wolf-public .auth-card,
.wolf-public .auth-panel { border-color: var(--wolf-line); background-color: rgba(9, 19, 32, .9); }
.wolf-public h1, .wolf-public h2, .wolf-public h3 { color: #fff; }

@media (max-width: 1120px) {
  .wolf-dashboard-grid { grid-template-columns: 1.35fr .65fr; }
  .wolf-referral-card { grid-column: 1 / -1; min-height: 165px !important; }
  .wolf-referral-card > div { width: 55%; }
  .wolf-referral-card img { right: 7%; width: 150px; }
  .wolf-quick-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .wolf-app-shell { display: block; }
  .wolf-sidebar { display: none; }
  .wolf-main-column { min-width: 0; }
  .wolf-topbar { height: 60px; padding: 0 18px; }
  .wolf-topbar-title small, .wolf-user-chip b, .wolf-user-chip i { display: none; }
  .wolf-user-chip > span { width: 34px; height: 34px; }
  .wolf-authenticated .container { width: min(100% - 28px, 680px); }
  .wolf-authenticated .cabinet-page { padding: 16px 0 92px; }
  .wolf-mobile-nav { position: fixed; z-index: 50; inset: auto 10px 9px; display: grid; grid-template-columns: repeat(4, 1fr); height: 64px; padding: 5px; border: 1px solid var(--wolf-line-strong); border-radius: 18px; background: rgba(7, 16, 28, .94); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); backdrop-filter: blur(18px); }
  .wolf-mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #899bb0; font-size: 10px; text-decoration: none; }
  .wolf-mobile-nav i { font-size: 20px; }
  .wolf-mobile-nav a:first-child { color: var(--wolf-cyan); }
  .wolf-welcome { min-height: 280px; align-items: flex-start; padding: 24px 24px 120px; }
  .wolf-welcome > img { right: -25px; bottom: -78px; width: 245px; }
  .wolf-welcome h1 { font-size: 30px; }
  .wolf-welcome p { max-width: 420px; font-size: 13px; }
  .wolf-welcome-actions { position: relative; z-index: 3; }
  .wolf-dashboard-grid { grid-template-columns: 1fr; }
  .wolf-referral-card { grid-column: auto; }
  .wolf-referral-card > div { width: 68%; }
}

@media (max-width: 540px) {
  .wolf-topbar-title { display: none; }
  .wolf-topbar::before { content: "Wolf.Ninja"; font-weight: 800; letter-spacing: -.04em; }
  .wolf-icon-button { border: 0; }
  .wolf-welcome { min-height: 318px; padding: 22px 20px 145px; }
  .wolf-welcome > img { right: -42px; bottom: -63px; width: 248px; }
  .wolf-welcome-actions .button { min-height: 39px; padding-inline: 13px; font-size: 11px; }
  .wolf-dashboard-grid > article { min-height: 188px; padding: 19px; }
  .wolf-status-body { justify-content: space-between; gap: 12px; }
  .wolf-status-body strong { font-size: 43px; }
  .wolf-card-actions { grid-template-columns: 1fr; }
  .wolf-balance-card { min-height: 160px !important; }
  .wolf-referral-card { min-height: 190px !important; }
  .wolf-referral-card img { right: -26px; width: 142px; }
  .wolf-quick-section { padding: 17px; }
  .wolf-section-title { align-items: flex-start; }
  .wolf-section-title > a { font-size: 0; }
  .wolf-section-title > a i { font-size: 18px; }
  .wolf-quick-grid { grid-template-columns: repeat(2, 1fr); }
  .wolf-quick-grid a { min-height: 92px; flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
  .wolf-authenticated .meridian-cabinet-grid { grid-template-columns: 1fr; }
}

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