: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-success: #35d9ff;
  --wolf-radius: 18px;
  --wolf-shadow: 0 28px 80px rgba(0, 0, 0, .3);
}

body.wolf-ui {
  --bg: var(--wolf-bg) !important;
  --surface: var(--wolf-panel) !important;
  --surface2: var(--wolf-panel-2) !important;
  --line: var(--wolf-line) !important;
  --text: var(--wolf-text) !important;
  --muted: var(--wolf-muted) !important;
  --accent: var(--wolf-cyan) !important;
  --accent2: var(--wolf-violet) !important;
  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) !important;
  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-cyan), var(--wolf-blue), 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); }
.wolf-ui .status:is(.active, .paid, .sent, .installed, .ok),
.wolf-ui .subscription-copy-status,
.wolf-ui .ticket-closed-note { color: var(--wolf-success); }
.wolf-ui .flash.success {
  color: var(--wolf-text);
  border-color: rgba(53, 217, 255, .32);
  background: rgba(53, 217, 255, .08);
}
.wolf-ui input[type="checkbox"],
.wolf-ui input[type="radio"] { accent-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; }

/* Landing page. The markup is shared by the public and authenticated shells,
   so these rules must not depend on the legacy `.meridian` body class. */
.wolf-ui .hero:not(.subscription-page) { padding: 46px 0 28px; }
.wolf-ui .hero:not(.subscription-page) .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
}
.wolf-ui .hero:not(.subscription-page) .hero-grid > * { min-width: 0; }
.wolf-ui .hero:not(.subscription-page) h1 {
  max-width: 720px;
  margin: 18px 0 22px;
  color: #fff;
  font-size: clamp(46px, 6vw, 82px);
  font-weight: 720;
  line-height: .94;
  letter-spacing: -.06em;
}
.wolf-ui .hero:not(.subscription-page) h1 span { color: var(--wolf-cyan); }
.wolf-ui .hero:not(.subscription-page) .lead { max-width: 620px; color: #aab9c9; font-size: clamp(16px, 1.7vw, 20px); }
.wolf-ui .hero:not(.subscription-page) .meridian-hero-art {
  display: block;
  width: 100%;
  max-width: 100%;
  height: min(460px, 42vw);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 28px 55px rgba(0, 0, 0, .45));
}
.wolf-ui .meridian-hero-notes { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 24px; color: var(--wolf-muted); font-size: 11px; }
.wolf-ui .meridian-hero-notes span { display: inline-flex; align-items: center; gap: 7px; }
.wolf-ui .meridian-hero-notes i, .wolf-ui .meridian-feature-strip i { color: var(--wolf-cyan); font-size: 18px; }
.wolf-ui .meridian-feature-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--wolf-line);
  border-bottom: 1px solid var(--wolf-line);
}
.wolf-ui .meridian-feature-strip span { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--wolf-muted); font-size: 12px; }
.wolf-ui .meridian-plan-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0; }
.wolf-ui .meridian-plan-tabs button {
  min-height: 39px;
  padding: 8px 14px;
  color: var(--wolf-muted);
  border: 1px solid var(--wolf-line);
  border-radius: 10px;
  background: rgba(17, 29, 47, .72);
  cursor: pointer;
}
.wolf-ui .meridian-plan-tabs button[aria-pressed="true"] { color: #06111c; border-color: transparent; background: var(--wolf-cyan); }

@media (max-width: 820px) {
  .wolf-ui .hero:not(.subscription-page) { padding-top: 30px; }
  .wolf-ui .hero:not(.subscription-page) .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wolf-ui .hero:not(.subscription-page) .meridian-hero-art { height: min(360px, 78vw); }
  .wolf-ui .meridian-feature-strip { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 520px) {
  .wolf-ui .hero:not(.subscription-page) h1 { font-size: clamp(42px, 14vw, 60px); }
  .wolf-ui .hero:not(.subscription-page) .hero-actions { display: grid; grid-template-columns: 1fr; }
  .wolf-ui .hero:not(.subscription-page) .hero-actions .button { width: 100%; }
}

@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-authenticated .meridian-cabinet-nav {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    margin: 0 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--wolf-line);
    scrollbar-width: thin;
  }
  .wolf-authenticated .meridian-cabinet-nav a {
    flex: 0 0 auto;
    color: var(--wolf-muted);
    font-size: 12px;
    text-decoration: none;
  }
  .wolf-authenticated .meridian-cabinet-nav a[aria-current="page"] { color: var(--wolf-cyan); }
  .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:not(.button) { 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: "Woof.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; }
}

/* V3 — horizontal product navigation and journey-first dashboard. */
.wolf-app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--wolf-line);
  background: rgba(5, 11, 20, .9);
  backdrop-filter: blur(20px);
}
.wolf-app-header-inner { min-height: 72px; display: flex; align-items: center; gap: 30px; }
.wolf-app-nav { display: flex; align-self: stretch; gap: 3px; margin-left: 24px; }
.wolf-app-nav a { position: relative; display: flex; align-items: center; padding: 0 13px; color: #8295ab; font-size: 13px; font-weight: 650; text-decoration: none; }
.wolf-app-nav a:hover, .wolf-app-nav a[aria-current="page"] { color: #fff; }
.wolf-app-nav a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 12px 0; height: 2px; border-radius: 2px; background: var(--wolf-cyan); box-shadow: 0 0 14px var(--wolf-cyan); }
.wolf-app-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.wolf-app-actions form { margin: 0; }
.wolf-app-actions button { color: #92a5ba; background: transparent; cursor: pointer; }
.wolf-icon-button { position: relative; }
.wolf-icon-button b { position: absolute; top: -4px; right: -4px; min-width: 17px; padding: 2px 4px; border-radius: 999px; color: #06101c; background: var(--wolf-cyan); font-size: 9px; text-align: center; }
.wolf-authenticated main { min-height: calc(100vh - 72px); }

.wolf-journey-hero {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(91, 151, 224, .2);
  border-radius: 22px;
  background: #07101c url('wolf-ninja/hero-mountains.webp') center / cover no-repeat;
  box-shadow: var(--wolf-shadow);
}
.wolf-journey-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3, 10, 19, .9) 0%, rgba(4, 11, 20, .64) 45%, rgba(2, 8, 16, .08) 78%); }
.wolf-journey-copy { position: relative; z-index: 2; max-width: 610px; padding: 36px 34px 130px; }
.wolf-journey-copy h1 { margin: 10px 0 8px; color: #fff; font-size: clamp(30px, 3vw, 46px); line-height: 1.05; letter-spacing: -.045em; }
.wolf-journey-copy p { max-width: 540px; margin: 0; color: #a9bbcf; font-size: 14px; }
.wolf-journey-hero > img { position: absolute; z-index: 2; right: 4%; bottom: -88px; width: min(31%, 345px); height: auto; filter: drop-shadow(0 24px 35px rgba(0, 0, 0, .55)); }
.wolf-journey { position: absolute; z-index: 3; inset: auto 24px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 16px 18px; list-style: none; border: 1px solid rgba(127, 177, 226, .16); border-radius: 15px; background: rgba(4, 12, 22, .79); backdrop-filter: blur(16px); }
.wolf-journey li { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 18px; }
.wolf-journey li:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: 38px; right: 5px; height: 1px; background: rgba(131, 164, 199, .2); }
.wolf-journey li > i { z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid rgba(137, 172, 209, .25); border-radius: 50%; color: #788da4; background: #0a1524; }
.wolf-journey li.is-complete > i { color: #05131d; border-color: var(--wolf-cyan); background: var(--wolf-cyan); }
.wolf-journey li.is-current > i { color: var(--wolf-cyan); border-color: var(--wolf-cyan); box-shadow: 0 0 0 4px rgba(53, 217, 255, .1); }
.wolf-journey span { position: relative; z-index: 2; min-width: 0; display: grid; gap: 2px; padding-right: 7px; background: rgba(4, 12, 22, .82); }
.wolf-journey b { overflow: hidden; color: #e8f1fb; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.wolf-journey small { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.wolf-action-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.wolf-action-strip .button { min-height: 43px; }
.wolf-overview-grid { display: grid; grid-template-columns: 1.35fr .72fr .82fr; gap: 14px; }
.wolf-overview-card { min-width: 0; min-height: 184px; padding: 20px; border: 1px solid var(--wolf-line); border-radius: 17px; background: linear-gradient(145deg, rgba(15, 28, 46, .95), rgba(7, 15, 27, .98)); box-shadow: 0 18px 42px rgba(0, 0, 0, .19); }
.wolf-card-label > a { color: var(--wolf-cyan); font-size: 10px; font-weight: 650; text-decoration: none; }
.wolf-subscription-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 23px; }
.wolf-subscription-line > div { display: grid; gap: 6px; }
.wolf-subscription-line > div strong { font-size: 18px; }
.wolf-subscription-line > div span { color: #57e4c3; font-size: 11px; }
.wolf-subscription-line > div i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #57e4c3; box-shadow: 0 0 9px #57e4c3; }
.wolf-subscription-line > b { font-size: 36px; line-height: 1; letter-spacing: -.06em; }
.wolf-subscription-line > b small { margin-left: 5px; font-size: 10px; font-weight: 500; }
.wolf-subscription-overview footer { display: flex; justify-content: space-between; color: var(--wolf-muted); font-size: 10px; }
.wolf-subscription-overview footer a { color: var(--wolf-cyan); text-decoration: none; }
.wolf-device-overview > strong { display: block; margin-top: 24px; font-size: 40px; line-height: 1; }
.wolf-device-overview > span { color: var(--wolf-muted); font-size: 10px; }
.wolf-device-icons { display: flex; gap: 7px; margin-top: 18px; }
.wolf-device-icons i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--wolf-line); border-radius: 9px; color: var(--wolf-cyan); background: rgba(53, 217, 255, .06); }
.wolf-quick-overview nav { display: grid; gap: 8px; margin-top: 15px; }
.wolf-quick-overview nav a { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--wolf-line); border-radius: 9px; color: #c6d3e1; font-size: 10px; text-decoration: none; }
.wolf-quick-overview nav i { color: var(--wolf-cyan); font-size: 16px; }
.wolf-referral-wide { position: relative; grid-column: 1 / -1; min-height: 155px; overflow: hidden; background: linear-gradient(105deg, rgba(19, 28, 52, .98), rgba(42, 32, 87, .9)) !important; }
.wolf-referral-wide > div { position: relative; z-index: 2; max-width: 65%; }
.wolf-referral-wide h2 { margin: 8px 0 6px; font-size: 21px; }
.wolf-referral-wide p { margin: 0 0 13px; color: var(--wolf-muted); font-size: 10px; }
.wolf-referral-wide .button { min-height: 34px; padding: 0 13px; font-size: 10px; }
.wolf-referral-wide img { position: absolute; right: 6%; bottom: -55px; width: 190px; height: auto; }

/* Anonymous account setup and sign-in. */
.wolf-auth-flow, .wolf-login-page { padding: clamp(42px, 7vw, 90px) 0; }
.wolf-auth-layout { display: grid; grid-template-columns: 1.02fr .98fr; max-width: 1060px; margin: 0 auto; }
.wolf-auth-layout > * { border-radius: 0 !important; }
.wolf-auth-layout > :first-child { border-radius: 22px 0 0 22px !important; }
.wolf-auth-layout > :last-child { border-radius: 0 22px 22px 0 !important; }
.wolf-auth-intro { position: relative; overflow: hidden; min-height: 590px; padding: 52px !important; background: #07111f url('wolf-ninja/hero-mountains.webp') center / cover no-repeat !important; }
.wolf-auth-intro::after { content: ""; position: absolute; inset: 0; background: rgba(2, 8, 16, .58); }
.wolf-auth-intro > * { position: relative; z-index: 1; }
.wolf-auth-intro h1 { margin: 24px 0 18px; font-size: clamp(39px, 4.2vw, 62px); line-height: .98; letter-spacing: -.055em; }
.wolf-auth-intro p { max-width: 480px; color: #a9bbce; line-height: 1.65; }
.wolf-auth-steps { display: grid; gap: 16px; margin: 38px 0 0; padding: 0; list-style: none; }
.wolf-auth-steps li { display: flex; align-items: center; gap: 12px; }
.wolf-auth-steps b { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--wolf-line-strong); border-radius: 50%; color: var(--wolf-cyan); }
.wolf-security-note { display: flex; gap: 12px; margin-top: 30px; padding: 15px; border: 1px solid rgba(53, 217, 255, .2); border-radius: 12px; background: rgba(4, 17, 28, .68); }
.wolf-security-note i { color: var(--wolf-cyan); font-size: 22px; }
.wolf-security-note span { color: #b9c8d7; font-size: 12px; line-height: 1.5; }
.wolf-auth-card { min-height: 590px; display: flex; flex-direction: column; justify-content: center; padding: 52px !important; }
.wolf-auth-card h2 { margin: 8px 0 25px; font-size: 34px; }
.wolf-totp-qr { width: 238px; min-height: 238px; display: grid; place-items: center; margin: 0 auto 14px; padding: 12px; border-radius: 16px; background: #fff; }
.wolf-totp-qr img { display: block; width: 100%; height: auto; }
.wolf-manual-secret { margin-bottom: 20px; color: var(--wolf-muted); font-size: 11px; text-align: center; }
.wolf-manual-secret code { display: block; margin-top: 9px; padding: 10px; overflow-wrap: anywhere; color: var(--wolf-cyan); border: 1px solid var(--wolf-line); border-radius: 8px; background: rgba(4, 12, 23, .7); }
.wolf-recovery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.wolf-recovery-grid code { padding: 9px; border: 1px solid var(--wolf-line); border-radius: 8px; color: #d8e8f8; background: rgba(4, 12, 23, .7); text-align: center; font-size: 11px; }
.wolf-code-confirm { display: flex; align-items: center; gap: 9px; margin: 19px 0 11px; color: #b9c8d7; font-size: 12px; }
.wolf-login-head { max-width: 680px; margin: 0 auto 30px; text-align: center; }
.wolf-login-head h1 { margin: 10px 0 8px; font-size: clamp(40px, 5vw, 64px); letter-spacing: -.055em; }
.wolf-login-head p { color: var(--wolf-muted); }
.wolf-login-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 14px; max-width: 1040px; margin: 0 auto; }
.wolf-login-grid .auth-card h2 { font-size: 34px; }
.wolf-login-primary { border-color: rgba(53, 217, 255, .25) !important; }
.wolf-login-secondary { display: grid; gap: 14px; }
.wolf-login-secondary .auth-card { padding: 27px !important; }
.wolf-login-secondary h3 { margin: 7px 0 16px; font-size: 21px; }
.wolf-telegram-login { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px !important; }
.wolf-telegram-login h3, .wolf-telegram-login p { margin: 3px 0; }

/* Shared Woof.Ninja skin for admin and public subscription pages. */
body.meridian.wolf-admin { --bg:#050b14; --surface:#0b1422; --surface2:#101b2c; --line:rgba(139,184,224,.16); --text:#f5f8ff; --muted:#8fa3ba; --accent:#35d9ff; --accent2:#8258ff; background:#050b14; color:#f5f8ff; }
.wolf-admin .sidebar { background: linear-gradient(180deg, #08121f, #050c16); border-color: var(--wolf-line); }
.wolf-admin .admin-brand-image { object-fit: contain; filter: drop-shadow(0 0 12px rgba(53,217,255,.25)); }
.wolf-admin .sidebar-nav a, .wolf-admin .sidebar-nav summary { color:#91a4ba; }
.wolf-admin .sidebar-nav a:hover, .wolf-admin .sidebar-nav summary:hover, .wolf-admin .sidebar-nav .active { color:#fff; background:rgba(53,217,255,.08); }
.wolf-admin .sidebar-nav .active .nav-link-icon, .wolf-admin .nav-link-icon { color:var(--wolf-cyan); }
.wolf-admin .topbar { background:rgba(5,12,22,.88); border-color:var(--wolf-line); backdrop-filter:blur(18px); }
.wolf-admin .content { background: radial-gradient(circle at 85% 0, rgba(45,92,176,.12), transparent 32rem), #050b14; }
.wolf-admin .card, .wolf-admin .mc-section, .wolf-admin .mc-search, .wolf-admin .mc-metric, .wolf-admin .mc-readiness { border-color:var(--wolf-line) !important; background:linear-gradient(145deg,rgba(15,28,46,.96),rgba(7,15,27,.98)) !important; box-shadow:0 16px 40px rgba(0,0,0,.18); }
.wolf-admin .button { border:0; color:#03111c; background:linear-gradient(112deg,var(--wolf-cyan),#62b7ff 55%,#8d6cff); }
.wolf-admin .button.secondary { color:#fff; border:1px solid var(--wolf-line-strong); background:rgba(27,44,66,.58); }
.wolf-admin input, .wolf-admin select, .wolf-admin textarea { color:#fff; border-color:var(--wolf-line); background:rgba(4,12,23,.72); }
.wolf-admin .eyebrow, .wolf-admin .mc-section-number, .wolf-admin .mc-text-link { color:var(--wolf-cyan); }
.meridian.admin-surface.wolf-admin .sidebar { background:linear-gradient(180deg,#08121f,#050c16) !important; border-color:var(--wolf-line); }
.meridian.admin-surface.wolf-admin .sidebar :is(a.active,.nav-primary.active) { color:#fff !important; border-color:rgba(53,217,255,.2) !important; background:linear-gradient(90deg,rgba(53,217,255,.16),rgba(89,96,229,.08)) !important; box-shadow:inset 2px 0 var(--wolf-cyan); }
.meridian.admin-surface.wolf-admin .topbar { background:rgba(5,12,22,.9) !important; border-color:var(--wolf-line); backdrop-filter:blur(18px); }
.meridian.admin-surface.wolf-admin .button { color:#03111c !important; background:linear-gradient(112deg,var(--wolf-cyan),#62b7ff 55%,#8d6cff) !important; }
.meridian.admin-surface.wolf-admin .button.secondary { color:#fff !important; border-color:var(--wolf-line-strong) !important; background:rgba(27,44,66,.58) !important; }
.meridian.admin-surface.wolf-admin :is(.field,textarea,select) { color:#fff !important; border-color:var(--wolf-line) !important; background:rgba(4,12,23,.72) !important; }

body.meridian.wolf-subscription { --bg:#050b14; --surface:#0b1422; --surface2:#101b2c; --line:rgba(139,184,224,.16); --text:#f5f8ff; --muted:#8fa3ba; --accent:#35d9ff; --accent2:#8258ff; min-height:100vh; background:radial-gradient(circle at 82% 0,rgba(46,91,179,.16),transparent 34rem),#050b14; color:#f5f8ff; }
.wolf-subscription .subscription-page { padding-top:24px; background:transparent; }
.wolf-subscription .subscription-brandbar, .wolf-subscription .subscription-menu { border-color:var(--wolf-line); }
.wolf-subscription .subscription-menu a { color:#8fa3ba; }
.wolf-subscription .subscription-menu a:hover { color:var(--wolf-cyan); }
.wolf-subscription .subscription-hero-grid { overflow:hidden; padding:36px; border:1px solid var(--wolf-line); border-radius:22px; background:#07101c url('wolf-ninja/hero-mountains.webp') center / cover no-repeat; box-shadow:var(--wolf-shadow); }
.wolf-subscription .subscription-hero-grid > div:first-child { position:relative; z-index:2; align-self:center; }
.wolf-subscription .subscription-hero-grid h1 { color:#fff; }
.wolf-subscription .subscription-summary { position:relative; overflow:hidden; border-color:rgba(53,217,255,.22); background:rgba(5,14,25,.76) !important; backdrop-filter:blur(14px); }
.wolf-subscription .meridian-subscription-art { right:-52px; bottom:-90px; width:260px; height:auto; object-fit:contain; opacity:.58; filter:drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
.wolf-subscription .card, .wolf-subscription .subscription-app-card, .wolf-subscription .subscription-permanent-note { color:#f5f8ff; border-color:var(--wolf-line); background:linear-gradient(145deg,rgba(15,28,46,.96),rgba(7,15,27,.98)); }
.wolf-subscription .button { border:0; color:#03111c; background:linear-gradient(112deg,var(--wolf-cyan),#62b7ff 55%,#8d6cff); }
.wolf-subscription .button.secondary { color:#fff; border:1px solid var(--wolf-line-strong); background:rgba(27,44,66,.58); }
.wolf-subscription .subscription-copy { color:#dbe8f7; border-color:var(--wolf-line-strong); background:rgba(4,12,23,.75); }
.wolf-subscription .eyebrow, .wolf-subscription .subscription-status-icon { color:var(--wolf-cyan); }
.meridian.subscription-surface.wolf-subscription .subscription-hero-grid { gap:40px; padding:36px; border:1px solid var(--wolf-line); border-radius:22px; background:#07101c url('wolf-ninja/hero-mountains.webp') center / cover no-repeat; box-shadow:var(--wolf-shadow); }
.meridian.subscription-surface.wolf-subscription .subscription-summary { padding:22px; border:1px solid rgba(53,217,255,.22) !important; border-radius:17px !important; background:rgba(5,14,25,.76) !important; box-shadow:0 18px 42px rgba(0,0,0,.2) !important; }
.meridian.subscription-surface.wolf-subscription .button { color:#03111c !important; background:linear-gradient(112deg,var(--wolf-cyan),#62b7ff 55%,#8d6cff) !important; }
.meridian.subscription-surface.wolf-subscription .button.secondary { color:#fff !important; border-color:var(--wolf-line-strong) !important; background:rgba(27,44,66,.58) !important; }
.meridian.subscription-surface.wolf-subscription .subscription-copy { color:#dbe8f7 !important; border-color:var(--wolf-line-strong) !important; background:rgba(4,12,23,.75) !important; }

@media (max-width: 980px) {
  .wolf-app-nav { display:none; }
  .wolf-overview-grid { grid-template-columns:1fr 1fr; }
  .wolf-subscription-overview { grid-column:1 / -1; }
  .wolf-auth-layout, .wolf-login-grid { grid-template-columns:1fr; }
  .wolf-auth-layout > :first-child { min-height:auto; border-radius:22px 22px 0 0 !important; }
  .wolf-auth-layout > :last-child { border-radius:0 0 22px 22px !important; }
}

@media (max-width: 820px) {
  .wolf-app-header-inner { min-height:60px; }
  .wolf-app-actions .wolf-user-chip b { display:none; }
  .wolf-journey-hero { min-height:440px; }
  .wolf-journey-copy { padding:28px 25px 210px; }
  .wolf-journey-hero > img { right:-24px; bottom:20px; width:235px; }
  .wolf-journey { grid-template-columns:1fr 1fr; gap:12px; }
  .wolf-journey li:not(:last-child)::after { display:none; }
  .wolf-journey span { background:transparent; }
  .wolf-referral-wide > div { max-width:72%; }
}

@media (max-width: 560px) {
  .wolf-app-actions .wolf-icon-button, .wolf-app-actions form { display:none; }
  .wolf-journey-hero { min-height:485px; }
  .wolf-journey-copy { padding:25px 20px 245px; }
  .wolf-journey-copy h1 { font-size:31px; }
  .wolf-journey { inset:auto 12px 12px; padding:13px; }
  .wolf-journey b { font-size:10px; }
  .wolf-overview-grid { grid-template-columns:1fr; }
  .wolf-subscription-overview { grid-column:auto; }
  .wolf-referral-wide { grid-column:auto; min-height:190px; }
  .wolf-referral-wide > div { max-width:76%; }
  .wolf-referral-wide img { right:-28px; width:150px; }
  .wolf-auth-intro, .wolf-auth-card { min-height:auto; padding:28px !important; }
  .wolf-auth-intro h1 { font-size:38px; }
  .wolf-recovery-grid { grid-template-columns:1fr; }
  .wolf-login-secondary .auth-card, .wolf-login-grid > .auth-card { padding:24px !important; }
  .wolf-telegram-login { align-items:flex-start; flex-direction:column; }
  .wolf-subscription .subscription-hero-grid { padding:24px 20px; }
}