/**
 * EGIDA SHIELD — Subscriber cabinet (Stage LK-10)
 * Simpler than admin shell: top nav, fewer chrome layers.
 * Reuses DS tokens + components; no notification center.
 */

html.eg-ds,
html.eg-ds body {
  margin: 0;
  min-height: 100%;
  font-family: var(--eg-font-sans);
  font-size: var(--eg-text-body);
  line-height: var(--eg-leading-body);
  color: var(--eg-text);
  background-color: var(--eg-bg-canvas);
}

html.eg-ds body {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(46, 184, 166, 0.08) 0%, transparent 55%),
    radial-gradient(700px 360px at 92% 8%, rgba(90, 160, 200, 0.05) 0%, transparent 50%),
    linear-gradient(165deg, var(--eg-bg-canvas), #0d141c 48%, #080c10);
}

html.eg-ds a {
  color: var(--eg-link);
  text-decoration: none;
}

html.eg-ds a:hover {
  text-decoration: underline;
}

/* ——— Auth ——— */
.lk-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--eg-space-6);
}

.lk-auth__card {
  width: min(100%, 420px);
  padding: var(--eg-space-8) var(--eg-space-6);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg);
  background: color-mix(in srgb, var(--eg-bg-surface) 92%, #000);
  box-shadow: var(--eg-shadow-md);
  animation: lk-rise 420ms var(--eg-ease) both;
}

.lk-auth__card .eg-brand {
  margin: 0 0 var(--eg-space-2);
  letter-spacing: var(--eg-tracking-brand);
  font-weight: var(--eg-weight-bold);
  font-size: 1.15rem;
  color: var(--eg-text-brand);
}

.lk-auth__card h1 {
  margin: 0 0 var(--eg-space-2);
  font-size: var(--eg-text-h1);
  font-weight: var(--eg-weight-semibold);
  line-height: var(--eg-leading-tight);
}

.lk-auth__card .lk-lead {
  margin: 0 0 var(--eg-space-6);
  color: var(--eg-text-secondary);
  font-size: var(--eg-text-secondary-size);
}

.lk-auth__card label {
  display: block;
  margin-bottom: var(--eg-space-4);
  font-size: var(--eg-text-caption);
  letter-spacing: var(--eg-tracking-label);
  color: var(--eg-text-muted);
  text-transform: uppercase;
}

.lk-auth__card input {
  display: block;
  width: 100%;
  margin-top: var(--eg-space-2);
  box-sizing: border-box;
}

.lk-auth__card .eg-btn {
  width: 100%;
  margin-top: var(--eg-space-2);
}

/* ——— App shell (top nav) ——— */
.lk-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.lk-topbar {
  position: sticky;
  top: 0;
  z-index: var(--eg-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--eg-space-4);
  min-height: var(--eg-topbar-height);
  padding: 0 var(--eg-space-5);
  border-bottom: 1px solid var(--eg-border);
  background: color-mix(in srgb, var(--eg-bg-surface) 88%, transparent);
  backdrop-filter: blur(12px);
}

.lk-topbar__brand {
  flex: 0 0 auto;
  font-weight: var(--eg-weight-bold);
  letter-spacing: var(--eg-tracking-brand);
  color: var(--eg-text-brand);
  text-decoration: none !important;
  white-space: nowrap;
}

.lk-topbar__nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--eg-space-1);
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
}

.lk-topbar__nav::-webkit-scrollbar {
  display: none;
}

.lk-nav-link {
  flex: 0 0 auto;
  padding: 0.45rem 0.75rem;
  border-radius: var(--eg-radius);
  color: var(--eg-text-secondary) !important;
  text-decoration: none !important;
  font-size: var(--eg-text-secondary-size);
  font-weight: var(--eg-weight-medium);
  transition: background var(--eg-duration) var(--eg-ease), color var(--eg-duration) var(--eg-ease);
}

.lk-nav-link:hover {
  background: var(--eg-bg-hover);
  color: var(--eg-text) !important;
}

.lk-nav-link.is-active {
  background: var(--eg-accent-soft);
  color: var(--eg-accent-hover) !important;
}

.lk-topbar__user {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--eg-space-3);
  margin-left: auto;
}

.lk-topbar__name {
  font-size: var(--eg-text-secondary-size);
  color: var(--eg-text-secondary);
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lk-main {
  flex: 1 1 auto;
  width: min(100%, var(--eg-content-max));
  margin: 0 auto;
  padding: var(--eg-space-6) var(--eg-page-pad-x) var(--eg-space-10);
  animation: lk-rise 360ms var(--eg-ease) both;
}

.lk-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--eg-space-4);
  margin-bottom: var(--eg-space-6);
}

.lk-page-head h1 {
  margin: 0;
  font-size: var(--eg-text-h1);
  font-weight: var(--eg-weight-semibold);
  line-height: var(--eg-leading-tight);
}

.lk-page-head p {
  margin: var(--eg-space-2) 0 0;
  color: var(--eg-text-secondary);
  font-size: var(--eg-text-secondary-size);
}

/* ——— Dashboard grid ——— */
.lk-grid {
  display: grid;
  gap: var(--eg-space-4);
}

.lk-grid--stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lk-grid--two {
  grid-template-columns: 1.2fr 0.8fr;
}

.lk-stat {
  padding: var(--eg-space-5);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-md);
  background: var(--eg-bg-surface);
  transition: border-color var(--eg-duration) var(--eg-ease), transform var(--eg-duration) var(--eg-ease);
}

.lk-stat:hover {
  border-color: var(--eg-border-strong);
  transform: translateY(-1px);
}

.lk-stat__label {
  margin: 0;
  font-size: var(--eg-text-caption);
  letter-spacing: var(--eg-tracking-label);
  text-transform: uppercase;
  color: var(--eg-text-muted);
}

.lk-stat__value {
  margin: var(--eg-space-2) 0 0;
  font-size: 1.5rem;
  font-weight: var(--eg-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--eg-text-brand);
}

.lk-stat__hint {
  margin: var(--eg-space-2) 0 0;
  font-size: var(--eg-text-caption);
  color: var(--eg-text-muted);
}

.lk-stat--accent {
  border-color: color-mix(in srgb, var(--eg-accent) 35%, var(--eg-border));
  background:
    linear-gradient(145deg, var(--eg-accent-soft), transparent 60%),
    var(--eg-bg-surface);
}

.lk-panel {
  padding: var(--eg-space-5);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-md);
  background: var(--eg-bg-surface);
}

.lk-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eg-space-3);
  margin-bottom: var(--eg-space-4);
}

.lk-panel__head h2 {
  margin: 0;
  font-size: var(--eg-text-h3);
  font-weight: var(--eg-weight-semibold);
}

.lk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eg-space-3);
}

.lk-support-cta {
  display: flex;
  flex-direction: column;
  gap: var(--eg-space-4);
  justify-content: center;
  min-height: 100%;
}

.lk-support-cta p {
  margin: 0;
  color: var(--eg-text-secondary);
}

.lk-note {
  margin: var(--eg-space-4) 0 0;
  padding: var(--eg-space-3) var(--eg-space-4);
  border-radius: var(--eg-radius);
  border: 1px solid var(--eg-border);
  background: var(--eg-bg-elevated);
  color: var(--eg-text-secondary);
  font-size: var(--eg-text-secondary-size);
}

.lk-dl {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: var(--eg-space-3) var(--eg-space-4);
  margin: 0;
}

.lk-dl dt {
  margin: 0;
  color: var(--eg-text-muted);
  font-size: var(--eg-text-secondary-size);
}

.lk-dl dd {
  margin: 0;
  color: var(--eg-text);
  word-break: break-word;
}

.lk-stack {
  display: grid;
  gap: var(--eg-space-4);
}

@keyframes lk-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 960px) {
  .lk-grid--stats,
  .lk-grid--two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .lk-topbar {
    flex-wrap: wrap;
    padding: var(--eg-space-3) var(--eg-space-4);
    gap: var(--eg-space-2);
  }

  .lk-topbar__nav {
    order: 3;
    width: 100%;
    padding-bottom: var(--eg-space-1);
  }

  .lk-topbar__user {
    margin-left: auto;
  }

  .lk-topbar__name {
    display: none;
  }

  .lk-main {
    padding: var(--eg-space-5) var(--eg-space-4) var(--eg-space-8);
  }

  .lk-dl {
    grid-template-columns: 1fr;
    gap: var(--eg-space-1);
  }

  .lk-dl dt {
    margin-top: var(--eg-space-2);
  }
}


/* Stage LK-12 — top-up form */
.lk-topup-form {
  display: grid;
  gap: var(--eg-space-4);
  max-width: 28rem;
}
.lk-topup-form .lk-actions {
  margin-top: var(--eg-space-1);
}
.lk-topup + .lk-panel {
  margin-top: 1.25rem;
}