/* ============================================================
   REAL — User Dashboard
   Aligned 1:1 with Admin Design System v4
   (matches public/css/styles.css)
   ============================================================ */

:root {
  /* ── Surfaces ─────────────────────────────── */
  --d-bg:        #0a0a0a;
  --d-bg-1:      #0e0e0e;
  --d-bg-2:      #131313;
  --d-bg-3:      #1a1a1a;
  --d-bg-card:   #101010;
  --d-bg-hover:  rgba(255,255,255,0.04);
  --d-bg-elev:   #161616;

  /* ── Borders ──────────────────────────────── */
  --d-border:        rgba(255,255,255,0.05);
  --d-border-soft:   rgba(255,255,255,0.03);
  --d-border-hover:  rgba(255,255,255,0.10);
  --d-border-strong: rgba(255,255,255,0.07);

  /* ── Foreground (white scale) ────────────── */
  --d-fg:    #ffffff;
  --d-fg-2:  rgba(255,255,255,0.82);
  --d-fg-3:  rgba(255,255,255,0.55);
  --d-fg-4:  rgba(255,255,255,0.32);

  /* ── Status ───────────────────────────────── */
  --d-green:        #00de6a;
  --d-green-soft:   rgba(0,222,106,0.10);
  --d-amber:        #e8a317;
  --d-amber-soft:   rgba(232,163,23,0.10);
  --d-red:          #e5484d;
  --d-red-soft:     rgba(229,72,77,0.10);
  --d-blue:         #3b82f6;
  --d-blue-soft:    rgba(59,130,246,0.10);
  --d-purple:       #a855f7;

  /* ── Radii ────────────────────────────────── */
  --d-r-sm: 6px;
  --d-r:    10px;
  --d-r-lg: 16px;
  --d-r-xl: 20px;

  /* ── Type ─────────────────────────────────── */
  --d-font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --d-font-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  --d-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-dur-fast: 180ms;
  --d-dur-base: 320ms;
}

/* ─────────────────────────────────────────────
   Page base
   ───────────────────────────────────────────── */
html { scrollbar-gutter: stable; height: 100%; }
body.auth-checking .dash-shell { opacity: 0; pointer-events: none; }
body {
  padding-top: var(--nav-h);
  overflow-y: scroll;
}
@media (max-width: 760px) { body { padding-top: 0; } }

::selection { background: rgba(255,255,255,0.12); color: var(--d-fg); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* Lucide */
.lucide {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   App shell
   ───────────────────────────────────────────── */
.dash-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  width: min(100%, 1588px);
  max-width: calc(100vw - 40px);
  margin: 0 auto;
  padding: 0;
  gap: 0;
  min-height: calc(100vh - var(--nav-h));
  overflow-x: visible;
}
@media (max-width: 760px) {
  .dash-shell { min-height: 100vh; }
}

/* ─────────────────────────────────────────────
   Sidebar — match admin .sidebar
   ───────────────────────────────────────────── */
.d-sidebar {
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--d-border);
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
/* Brand inside sidebar is redundant when site-nav is present */
.d-sidebar .d-brand { display: none; }

/* Brand */
.d-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  margin-bottom: 10px;
  border-radius: var(--d-r);
  text-decoration: none;
  transition: background 0.12s;
}
.d-brand:hover { background: var(--d-bg-hover); }
.d-brand img,
.d-brand .brand-mark {
  width: 22px; height: 22px;
  object-fit: contain;
  border-radius: 5px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--d-border);
  display: grid; place-items: center;
  color: var(--d-fg);
  font-weight: 700; font-size: 11px;
}
.d-brand-name {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--d-fg);
}

/* Section labels */
.d-section-label {
  font-size: 10px;
  color: var(--d-fg-4);
  padding: 12px 10px 5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Nav items — match admin .nav-item */
.d-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: var(--d-r);
  color: var(--d-fg-3);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  letter-spacing: -0.003em;
  transition:
    background var(--d-dur-fast) var(--d-ease),
    color var(--d-dur-fast) var(--d-ease),
    transform var(--d-dur-fast) var(--d-ease);
  text-decoration: none;
}
.d-nav-item:hover {
  background: rgba(255,255,255,0.045);
  color: var(--d-fg-2);
  transform: translateX(1px);
}
.d-nav-item.active {
  background: rgba(255,255,255,0.07);
  color: var(--d-fg);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.035) inset;
}
.d-nav-icon {
  width: 15px; height: 15px;
  color: var(--d-fg-4);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.d-nav-item:hover .d-nav-icon { color: var(--d-fg-3); }
.d-nav-item.active .d-nav-icon { color: var(--d-fg); }
.d-nav-item > span:not(.d-nav-icon):not(.d-nav-badge) {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d-nav-badge {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px;
  color: var(--d-fg-4);
  font-variant-numeric: tabular-nums;
  background: var(--d-bg-3);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}

.d-nav-divider {
  height: 1px; background: var(--d-border);
  margin: 6px 8px;
}

/* User card pinned to bottom (admin .sidebar-user) */
/* ─────────────────────────────────────────────
   Main + topbar — match admin
   ───────────────────────────────────────────── */
.d-main {
  min-width: 0;
  width: 100%;
  background: transparent;
  padding: 0 36px;
  position: relative;
  z-index: 1;
}

/* Topbar (sticky breadcrumb) */
.d-topbar {
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0;
  gap: 12px;
  position: sticky;
  top: var(--nav-h);
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 5;
  border-bottom: 1px solid transparent;
}
.d-crumb { color: var(--d-fg-4); font-size: 13px; font-weight: 500; }
.d-crumb.active { color: var(--d-fg-2); font-weight: 600; }
.d-crumb-sep { color: var(--d-fg-4); margin: 0 2px; }
.d-topbar-spacer { flex: 1; }
.d-topbar-actions { display: flex; align-items: center; gap: 6px; }

/* Page */
.d-page {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 0 80px;
  min-height: calc(100vh - var(--nav-h) - 52px);
}
.d-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px; gap: 16px;
  min-height: 64px;
}
.d-page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
  color: var(--d-fg);
  line-height: 1.2;
}
.d-page-sub {
  font-size: 12.5px;
  color: var(--d-fg-3);
  margin: 0;
  font-weight: 400;
  line-height: 1.65;
}
.d-inline-account-id {
  margin-left: 6px;
  color: rgba(255,255,255,0.20);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: middle;
}

/* Panels */
.d-panel { display: none; }
.d-panel.active {
  display: block;
  animation: d-fade-in 0.16s var(--d-ease);
}
@keyframes d-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────────
   Buttons (override site .btn within shell)
   ───────────────────────────────────────────── */
.d-shell .btn,
.dash-shell .btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border-radius: var(--d-r);
  border: 1px solid var(--d-border);
  background: rgba(255,255,255,0.018);
  color: var(--d-fg-2);
  font-size: 12.5px; font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.005em;
  overflow: hidden;
  isolation: isolate;
  transition:
    background var(--d-dur-fast) var(--d-ease),
    border-color var(--d-dur-fast) var(--d-ease),
    color var(--d-dur-fast) var(--d-ease),
    transform var(--d-dur-fast) var(--d-ease),
    box-shadow var(--d-dur-base) var(--d-ease);
  white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: auto;
  text-transform: none;
  text-decoration: none;
}
.dash-shell .btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.09);
  color: var(--d-fg);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.025) inset;
}
.dash-shell .btn:active:not(:disabled) { transform: scale(0.98); }
.dash-shell .btn:disabled { opacity: 0.35; cursor: not-allowed; }
.dash-shell .btn .lucide { width: 13px; height: 13px; }

.dash-shell .btn-primary {
  background: var(--d-fg);
  color: #0a0a0a;
  border-color: transparent;
  font-weight: 700;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.34) inset,
    0 0 0 1px rgba(255,255,255,0.075),
    0 8px 24px rgba(0,0,0,0.35);
}
.dash-shell .btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.40) 50%, transparent 70%);
  transform: translateX(-105%);
  transition: transform 0.7s var(--d-ease);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.dash-shell .btn-primary:hover:not(:disabled) {
  background: #fff;
  color: #0a0a0a;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 1px rgba(255,255,255,0.14),
    0 12px 44px rgba(255,255,255,0.10),
    0 0 0 6px rgba(255,255,255,0.026);
}
.dash-shell .btn-primary:hover:not(:disabled)::before { transform: translateX(105%); }

.dash-shell .btn-ghost {
  background: transparent;
  border-color: var(--d-border);
  color: var(--d-fg-3);
}
.dash-shell .btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,0.038);
  color: var(--d-fg-2);
  border-color: rgba(255,255,255,0.075);
}

.dash-shell .btn-danger {
  background: rgba(229,72,77,0.11);
  border-color: rgba(229,72,77,0.24);
  color: #ff8589;
  font-weight: 700;
}
.dash-shell .btn-danger:hover:not(:disabled) {
  background: rgba(229,72,77,0.18);
  color: #fff;
  border-color: rgba(229,72,77,0.36);
}

.dash-shell .btn-sm {
  height: 30px; padding: 0 12px;
  font-size: 12px; gap: 6px;
  border-radius: var(--d-r-sm);
}

/* ─────────────────────────────────────────────
   Card — admin parity (top highlight + inset shine)
   ───────────────────────────────────────────── */
.d-card {
  background: var(--d-bg-card);
  border: 1px solid var(--d-border);
  border-radius: var(--d-r-xl);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.016) inset;
  position: relative;
  transition: border-color var(--d-dur-base) var(--d-ease);
}
.d-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), transparent);
  pointer-events: none;
}
.d-card:hover { border-color: var(--d-border-hover); }

.d-card-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--d-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.d-card-title {
  font-size: 13px; font-weight: 600;
  color: var(--d-fg);
  margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.d-card-title .lucide { width: 13px; height: 13px; color: var(--d-fg-3); }
.d-card-sub { font-size: 12px; color: var(--d-fg-3); margin: 2px 0 0; }
.d-card-pad { padding: 22px 22px; }

/* ─────────────────────────────────────────────
   License metrics row — admin parity
   ───────────────────────────────────────────── */
.d-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.d-metric {
  position: relative; overflow: hidden; min-width: 0;
  background: var(--d-bg-card);
  border: 1px solid var(--d-border);
  border-radius: var(--d-r-xl);
  padding: 20px 20px 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.016) inset;
}
.d-metric-label { letter-spacing: 0.05em; }
.d-metric::before {
  content: ""; position: absolute;
  inset: 0 auto 0 0; width: 2px;
  background: var(--d-metric-color, var(--d-fg-4));
  opacity: 0.8;
}
.d-metric-top {
  display: flex; align-items: center; gap: 7px;
  min-width: 0;
}
.d-metric-icon {
  width: 13px; height: 13px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--d-metric-color, var(--d-fg-3));
}
.d-metric-icon .lucide { width: 12px; height: 12px; }
.d-metric-label {
  font-size: 10.5px; font-weight: 700;
  color: var(--d-fg-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-metric-value {
  margin-top: 12px;
  font-size: 24px; font-weight: 700;
  line-height: 1; letter-spacing: -0.03em;
  color: var(--d-fg);
  font-variant-numeric: tabular-nums;
}
.d-metric-value.skeleton {
  width: 110px; height: 24px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: d-skel 1.4s linear infinite;
}
@keyframes d-skel {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.d-metric-sub {
  margin-top: 4px;
  font-size: 11.5px; color: var(--d-fg-3);
  line-height: 1.35;
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-metric-sub.skeleton {
  display: block;
  width: 70px; height: 11px; border-radius: 4px;
  background: rgba(255,255,255,0.04);
}

.metric-blue   { --d-metric-color: var(--d-blue); }
.metric-green  { --d-metric-color: var(--d-green); }
.metric-amber  { --d-metric-color: var(--d-amber); }
.metric-red    { --d-metric-color: var(--d-red); }
.metric-purple { --d-metric-color: var(--d-purple); }
.metric-muted  { --d-metric-color: var(--d-fg-4); }

@media (max-width: 1180px) { .d-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .d-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .d-metrics { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────
   Overview grid (chart + actions)
   ───────────────────────────────────────────── */
.d-overview-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1000px) {
  .d-overview-grid { grid-template-columns: 1fr; }
}

/* Activity heatmap — admin-like bars */
.d-activity-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  align-items: end;
  height: 140px;
  margin-top: 6px;
}
.d-act-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  height: 100%;
  position: relative;
}
.d-act-bar-wrap {
  flex: 1; width: 100%;
  display: flex; align-items: flex-end;
}
.d-act-bar {
  width: 100%;
  background: var(--d-bg-3);
  border-radius: 3px;
  min-height: 4px;
  transition: height 0.7s var(--d-ease);
}
.d-act-bar.on    { background: var(--d-green); }
.d-act-bar.today { background: var(--d-fg); box-shadow: 0 0 12px rgba(255,255,255,0.18); }
.d-act-day {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--d-fg-4);
  font-variant-numeric: tabular-nums;
}
.d-act-col.today .d-act-day { color: var(--d-fg); }

.d-act-foot {
  display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--d-border);
  font-size: 11.5px; color: var(--d-fg-3); font-weight: 500;
}
.d-act-legend { display: inline-flex; align-items: center; gap: 6px; }
.d-act-swatch {
  width: 9px; height: 9px; border-radius: 2px;
}
.d-act-swatch.on    { background: var(--d-green); }
.d-act-swatch.today { background: var(--d-fg); }
.d-act-swatch.off   { background: var(--d-bg-3); border: 1px solid var(--d-border); }

/* Quick actions list */
.d-quick-list {
  display: flex; flex-direction: column;
}
.d-quick-item {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 22px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--d-border);
  cursor: pointer;
  text-align: left; width: 100%;
  font-family: inherit;
  color: var(--d-fg-2);
  text-decoration: none;
  transition: background var(--d-dur-fast) var(--d-ease);
}
.d-quick-item:last-child { border-bottom: none; }
.d-quick-item:hover { background: rgba(255,255,255,0.024); color: var(--d-fg); }
.d-quick-icon {
  width: 30px; height: 30px;
  border-radius: var(--d-r-sm);
  background: rgba(255,255,255,0.024);
  border: 1px solid var(--d-border);
  display: grid; place-items: center;
  color: var(--d-fg-3);
  flex-shrink: 0;
  transition: border-color var(--d-dur-fast) var(--d-ease), color var(--d-dur-fast) var(--d-ease);
}
.d-quick-item:hover .d-quick-icon {
  color: var(--d-fg);
  border-color: var(--d-border-hover);
}
.d-quick-text { flex: 1; min-width: 0; }
.d-quick-title {
  font-size: 13px; font-weight: 600;
  color: var(--d-fg);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-quick-arrow { color: var(--d-fg-4); }

/* ─────────────────────────────────────────────
   Redeem block (full-bleed card with form inline)
   ───────────────────────────────────────────── */
.d-redeem {
  background: var(--d-bg-card);
  border: 1px solid var(--d-border);
  border-radius: var(--d-r-xl);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.016) inset;
  position: relative;
  margin-bottom: 14px;
}
.d-redeem::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), transparent);
  pointer-events: none;
}
.d-redeem-body {
  padding: 20px 22px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}
@media (max-width: 600px) {
  .d-redeem-body { grid-template-columns: 1fr; }
}
.d-redeem-body .d-field { margin: 0; min-width: 0; }
.d-redeem-foot {
  padding: 10px 20px;
  border-top: 1px solid var(--d-border);
  font-size: 11.5px; color: var(--d-fg-4);
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.008);
  font-weight: 500;
}
.d-redeem-foot .lucide { width: 12px; height: 12px; }

/* ─────────────────────────────────────────────
   Forms — admin parity
   ───────────────────────────────────────────── */
.d-field { display: flex; flex-direction: column; gap: 6px; }
.d-label {
  font-size: 11.5px; color: var(--d-fg-2);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.d-input {
  min-height: 36px;
  width: 100%;
  background: rgba(255,255,255,0.014);
  border: 1px solid var(--d-border);
  border-radius: var(--d-r);
  color: var(--d-fg);
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.005em;
  outline: none;
  transition:
    border-color var(--d-dur-fast) var(--d-ease),
    background var(--d-dur-fast) var(--d-ease),
    box-shadow var(--d-dur-fast) var(--d-ease);
}
.d-input::placeholder { color: var(--d-fg-4); font-weight: 400; }
.d-input:hover { border-color: var(--d-border-hover); }
.d-input:focus {
  background: rgba(255,255,255,0.026);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.03);
}
.d-input.mono {
  font-family: var(--d-font-mono);
  font-variant-ligatures: none;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.d-field.invalid .d-input {
  border-color: rgba(229,72,77,0.46);
  background: rgba(229,72,77,0.04);
}
.d-err {
  font-size: 11px;
  color: var(--d-red);
  font-weight: 500;
  display: none;
  letter-spacing: 0.005em;
}
.d-field.invalid .d-err { display: block; }

.d-msg {
  font-size: 12px;
  margin: 4px 0 0;
  line-height: 1.5;
  font-weight: 500;
}
.d-msg[data-kind="success"] { color: var(--d-green); }
.d-msg[data-kind="error"]   { color: var(--d-red); }
.d-row-sub[data-kind="error"] { color: var(--d-red); }

/* ─────────────────────────────────────────────
   Detail / accordion rows (Security)
   ───────────────────────────────────────────── */
.d-stack {
  background: var(--d-bg-card);
  border: 1px solid var(--d-border);
  border-radius: var(--d-r-xl);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.016) inset;
  position: relative;
}
.d-stack::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), transparent);
  pointer-events: none;
}
.d-stack details + details { border-top: 1px solid var(--d-border); }
.d-stack details {
  background: transparent;
  transition: background 0.15s;
}
.d-stack details[open] { background: rgba(255,255,255,0.012); }
.d-stack summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex; align-items: center; gap: 14px;
  transition: background 0.15s;
}
.d-stack summary::-webkit-details-marker { display: none; }
.d-stack summary:hover { background: rgba(255,255,255,0.02); }

.d-row-icon {
  width: 32px; height: 32px;
  border-radius: var(--d-r-sm);
  background: rgba(255,255,255,0.024);
  border: 1px solid var(--d-border);
  display: grid; place-items: center;
  color: var(--d-fg-3);
  flex-shrink: 0;
}
.d-row-icon .lucide { width: 14px; height: 14px; }

.d-row-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.d-row-title {
  font-size: 13px; font-weight: 600;
  color: var(--d-fg); letter-spacing: -0.005em;
}
.d-row-sub {
  font-size: 11.5px; color: var(--d-fg-4);
  line-height: 1.5; font-weight: 500;
}
.d-row-sub:empty { display: none; }
.d-row-chev {
  color: var(--d-fg-4);
  flex-shrink: 0;
  transition: transform .22s var(--d-ease);
}
.d-row-chev .lucide { width: 14px; height: 14px; }
.d-stack details[open] .d-row-chev { transform: rotate(180deg); }

.d-row-body {
  padding: 20px 22px 24px calc(22px + 32px + 14px);
  display: flex; flex-direction: column; gap: 14px;
  border-top: 1px solid var(--d-border);
}
@media (max-width: 600px) {
  .d-row-body { padding-left: 22px; }
}
.d-row-body .d-field { max-width: 480px; }
.d-row-body .btn { align-self: flex-start; min-width: 110px; margin-top: 4px; }

/* Connected provider row */
.d-conn-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--d-border);
  border-radius: var(--d-r);
  background: rgba(255,255,255,0.014);
}
.d-conn-row .d-conn-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  display: grid; place-items: center;
  color: var(--d-fg);
  flex-shrink: 0;
  overflow: hidden;
}
.d-conn-row .d-conn-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.d-conn-row .d-conn-icon span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--d-surface-2);
  color: var(--d-fg);
  font-size: 14px;
  font-weight: 650;
}
.d-conn-row .d-conn-discord-icon {
  width: 23px;
  height: 23px;
  color: var(--d-fg);
  opacity: .9;
}
.d-conn-row .d-conn-meta { flex: 1; min-width: 0; }
.d-conn-row .d-conn-name {
  font-size: 13px; font-weight: 600;
  color: var(--d-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.d-conn-row .d-conn-sub {
  font-size: 11.5px; color: var(--d-fg-4);
  margin-top: 2px;
  font-family: var(--d-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   Devices page
   ───────────────────────────────────────────── */
.d-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  background: var(--d-bg-card);
  border: 1px solid var(--d-border);
  border-radius: var(--d-r-xl);
  box-shadow: 0 1px 0 rgba(255,255,255,0.016) inset;
  position: relative;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.d-bar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), transparent);
  pointer-events: none;
}
.d-bar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.d-bar-icon {
  width: 32px; height: 32px;
  border-radius: var(--d-r-sm);
  background: rgba(255,255,255,0.024);
  border: 1px solid var(--d-border);
  display: grid; place-items: center;
  color: var(--d-fg-3);
  flex-shrink: 0;
}
.d-bar-icon .lucide { width: 14px; height: 14px; }
.d-bar-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.d-bar-label {
  font-size: 13px; font-weight: 600; color: var(--d-fg);
  letter-spacing: -0.005em;
}
.d-bar-sub {
  font-size: 11.5px; color: var(--d-fg-4);
  line-height: 1.4; font-weight: 500;
}

/* Devices list — table-like with hover */
.d-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.d-table thead th {
  text-align: left;
  font-weight: 600; font-size: 11px;
  color: var(--d-fg-4);
  padding: 12px 18px;
  border-bottom: 1px solid var(--d-border);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.d-table tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--d-border);
  vertical-align: middle;
  color: var(--d-fg-2);
}
.d-table tbody tr { transition: background var(--d-dur-fast) var(--d-ease); }
.d-table tbody tr:hover { background: rgba(255,255,255,0.035); }
.d-table tbody tr:last-child td { border-bottom: none; }
.d-table .mono {
  font-family: var(--d-font-mono);
  font-variant-ligatures: none;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.d-date-cell {
  font-family: var(--d-font-sans);
  font-size: 12.5px;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--d-fg-2);
}

.d-table-wrap {
  background: var(--d-bg-card);
  border: 1px solid var(--d-border);
  border-radius: var(--d-r-xl);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.016) inset;
  position: relative;
}
.d-table-wrap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), transparent);
  pointer-events: none;
}

.d-device-cell {
  display: flex; align-items: center; gap: 12px;
}
.d-device-icon {
  width: 30px; height: 30px;
  border-radius: var(--d-r-sm);
  background: rgba(255,255,255,0.024);
  border: 1px solid var(--d-border);
  display: grid; place-items: center;
  color: var(--d-fg-3);
  flex-shrink: 0;
}
.d-device-icon .lucide { width: 14px; height: 14px; }
.d-device-name { font-weight: 600; color: var(--d-fg); }
.d-device-sub  { font-size: 11px; color: var(--d-fg-4); margin-top: 2px; font-weight: 500; }

/* Empty state */
.d-empty {
  text-align: center;
  padding: 52px 20px;
  color: var(--d-fg-3);
}
.d-empty-icon {
  width: 36px; height: 36px;
  margin: 0 auto 10px;
  border-radius: var(--d-r);
  background: rgba(255,255,255,0.024);
  border: 1px solid var(--d-border);
  display: grid; place-items: center;
  color: var(--d-fg-4);
}
.d-empty-icon .lucide { width: 16px; height: 16px; }
.d-empty-title {
  font-size: 13px; font-weight: 700;
  color: var(--d-fg-2);
  margin-bottom: 4px;
}
.d-empty-sub {
  font-size: 12.5px; color: var(--d-fg-3);
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Status pills (admin parity) */
.d-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--d-bg-3);
  border: 1px solid var(--d-border);
  color: var(--d-fg-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.d-status-pill[data-state="active"] {
  color: var(--d-green);
  background: var(--d-green-soft);
  border-color: rgba(0,222,106,0.18);
}
.d-status-pill[data-state="active"]::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--d-green);
  box-shadow: 0 0 0 2px rgba(0,222,106,0.15);
}
.d-status-pill[data-state="expired"] {
  color: var(--d-red);
  background: var(--d-red-soft);
  border-color: rgba(229,72,77,0.18);
}
.d-status-pill[data-state="expired"]::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--d-red);
}
.d-status-pill.skeleton {
  width: 84px; height: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--d-border);
  color: transparent;
}
#status-meta[hidden] { display: none !important; }

/* History block (separate activity cards) */
.d-history-skeleton {
  background: var(--d-bg-card);
  border: 1px solid var(--d-border);
  border-radius: var(--d-r-xl);
  padding: 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.016) inset;
}
.d-skel-line,
.d-skel-row {
  position: relative;
  overflow: hidden;
  border-radius: var(--d-r-sm);
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.035) 0%,
      rgba(255,255,255,0.075) 42%,
      rgba(255,255,255,0.035) 80%);
  background-size: 220% 100%;
  animation: d-skeleton 1.35s linear infinite;
}
.d-skel-line {
  width: 42%;
  height: 14px;
  margin-bottom: 18px;
}
.d-skel-line.wide { width: min(320px, 70%); }
.d-skel-row {
  width: 100%;
  height: 42px;
  margin-top: 10px;
}
.d-skel-row.short { width: 72%; }
@keyframes d-skeleton {
  from { background-position: 220% 0; }
  to   { background-position: -220% 0; }
}
.d-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.d-history-block {
  background: var(--d-bg-card);
  border: 1px solid var(--d-border);
  border-radius: var(--d-r-xl);
  overflow: hidden;
  min-width: 0;
}
.d-history-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: rgba(255,255,255,0.012);
  border-bottom: 1px solid var(--d-border);
}
.d-history-head .lucide { color: var(--d-fg-3); width: 13px; height: 13px; }
.d-history-head .label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--d-fg-3);
  flex: 1;
}

@media (max-width: 860px) {
  .d-history-grid { grid-template-columns: 1fr; }
}

/* Inline message (panel-level) */
.d-inline-msg {
  font-size: 12px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--d-r);
  background: rgba(255,255,255,0.014);
  border: 1px solid var(--d-border);
  color: var(--d-fg-2);
  display: none;
  font-weight: 500;
}
.d-inline-msg:not(:empty) { display: block; }
.d-inline-msg[data-kind="success"] {
  color: var(--d-green);
  background: var(--d-green-soft);
  border-color: rgba(0,222,106,0.18);
}
.d-inline-msg[data-kind="error"] {
  color: var(--d-red);
  background: var(--d-red-soft);
  border-color: rgba(229,72,77,0.18);
}
.d-field-msg {
  margin: 7px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 11.5px;
  line-height: 1.4;
}
.d-field-msg[data-kind="success"],
.d-field-msg[data-kind="error"] {
  background: transparent;
  border-color: transparent;
}
#device-message {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#device-message[data-kind="success"],
#device-message[data-kind="error"] {
  background: transparent;
  border-color: transparent;
}

/* ─────────────────────────────────────────────
   Mobile
   ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .d-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .d-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .dash-shell {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
  }
  .d-sidebar {
    position: relative; top: 0;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--d-border);
    padding: 12px;
    flex-direction: column;
    gap: 6px;
  }
  .d-sidebar nav.d-nav-rail {
    display: flex; flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px;
    margin: 0 -4px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .d-sidebar nav.d-nav-rail .d-nav-item { white-space: nowrap; flex-shrink: 0; }
  .d-sidebar .d-section-label { display: none; }
  .d-main { padding: 0 20px; }
  .d-page { padding: 20px 0 60px; }
}

@media (max-width: 760px) {
  .d-main { padding: 0 16px; }
  .d-page { padding: 16px 0 48px; }
}