/* ──────────────────────────────────────────────────────────────────────────
 *  LicensePro SaaS. design system v2 (hybrid glass)
 *  Solid dark sidebar, glass-morphism cards, subtle mesh background.
 *  Token-driven so colors/spacing/radius adjust globally from one place.
 * ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand */
  --primary:        #8b5cf6;
  --primary-soft:   #a78bfa;
  --primary-deep:   #6d28d9;
  --primary-darkest:#3b0764;
  --accent:         #f59e0b;
  --success:        #10b981;
  --warning:        #f59e0b;
  --danger:         #ef4444;

  /* Surfaces */
  --bg-base:        #f6f4ff;
  --bg-muted:       #efeaff;
  --bg-deeper:      #1a0b2e;
  --card:           rgba(255, 255, 255, 0.72);
  --card-solid:     #ffffff;
  --card-strong:    rgba(255, 255, 255, 0.92);
  --glass-border:   rgba(139, 92, 246, 0.18);
  --hairline:       rgba(15, 9, 30, 0.08);

  /* Text */
  --text:           #1a1330;
  --text-soft:      #4a4366;
  --muted:          #847a9e;
  --on-dark:        #f6f4ff;
  --on-dark-soft:   rgba(246, 244, 255, 0.7);
  --on-dark-mute:   rgba(246, 244, 255, 0.4);

  /* Layout */
  --sidebar-w:      236px;
  --topbar-h:       56px;
  --radius:         14px;
  --radius-sm:      10px;
  --radius-lg:      20px;

  /* Shadows */
  --shadow-card:    0 1px 2px rgba(15, 9, 30, 0.04), 0 8px 24px rgba(76, 29, 149, 0.07);
  --shadow-lift:    0 4px 12px rgba(15, 9, 30, 0.06), 0 16px 40px rgba(76, 29, 149, 0.12);
  --shadow-pop:     0 20px 60px rgba(15, 9, 30, 0.25);

  /* Motion */
  --t-fast:         .15s cubic-bezier(.4, 0, .2, 1);
  --t-med:          .25s cubic-bezier(.4, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(139, 92, 246, 0.15), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(217, 70, 239, 0.10), transparent 50%),
    var(--bg-base);
  color: var(--text);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  min-height: 100vh;
}

a { color: var(--primary-deep); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--primary); }

button { font-family: inherit; cursor: pointer; }

/* ── App shell ─────────────────────────────────────────────────────────── */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* Sidebar. solid dark, slightly translucent for depth */
.app-sidebar {
  background: linear-gradient(180deg, var(--bg-deeper) 0%, #100621 100%);
  border-right: 1px solid rgba(139, 92, 246, 0.15);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  /* dvh accounts for mobile browser chrome (URL bar) so the plan badge at the
     bottom doesn't get clipped behind it on iOS Safari. Fallback to vh for
     older browsers that don't support dvh yet. */
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  /* Extra bottom padding so the plan badge has breathing room even when the
     viewport gets cramped on landscape phones / small split screens. */
  padding-bottom: 32px;
}
.app-sidebar .brand-mark {
  padding: 0 4px 22px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.15);
  margin-bottom: 16px;
}
.app-sidebar .brand-mark .logo-box {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  border: 2px solid var(--primary-soft);
  border-radius: 10px;
  font-weight: 800;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-section + .nav-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(139, 92, 246, 0.12); }
.nav-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--on-dark-mute);
  padding: 4px 10px 10px;
  font-weight: 700;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--on-dark-soft);
  font-size: .92rem;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
  text-decoration: none;
}
.nav-item:hover {
  background: rgba(139, 92, 246, 0.12);
  color: var(--on-dark);
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0.08) 100%);
  color: var(--on-dark);
  box-shadow: inset 2px 0 0 var(--primary);
}
.nav-item .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }

.sidebar-foot { margin-top: auto; padding-top: 20px; }
.plan-badge {
  display: block;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--on-dark);
  font-size: .82rem;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.plan-badge:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
  color: var(--on-dark);
  text-decoration: none;
  transform: translateY(-1px);
}
.plan-badge .label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--on-dark-mute);
  font-weight: 700;
  margin-bottom: 4px;
}
.plan-badge .value { font-weight: 700; font-size: .92rem; }
.plan-badge.premium {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(139, 92, 246, 0.2));
  border-color: rgba(245, 158, 11, 0.35);
}
.plan-badge.premium:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(139, 92, 246, 0.28));
}
/* Free-tier upsell. gives the badge a distinct "tap me to upgrade" feel with
   a tiny CTA underneath the plan name. Subtle enough to not feel like a popup,
   prominent enough to be tappable on a mobile sidebar. */
.plan-badge.plan-badge-upsell {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(124, 58, 237, 0.22));
  border-color: rgba(139, 92, 246, 0.4);
}
.plan-badge.plan-badge-upsell:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(124, 58, 237, 0.32));
}
.plan-badge .upsell-cta {
  margin-top: 6px;
  font-size: .72rem;
  color: var(--primary-soft);
  font-weight: 600;
}

/* Main content area */
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.app-topbar {
  height: var(--topbar-h);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(246, 244, 255, 0.75);
  border-bottom: 1px solid var(--hairline);
}
.app-content {
  padding: 28px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
}
.app-legal-footer {
  padding: 18px 28px 24px;
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
}
.app-legal-footer a { color: var(--muted); }
.app-legal-footer a:hover { color: var(--primary-deep); }

/* Top-right user menu */
.user-menu { position: relative; }
.user-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  cursor: pointer;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.user-trigger:hover { box-shadow: var(--shadow-card); }
.user-trigger:active { transform: scale(.98); }
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .78rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.user-trigger .chev { color: var(--muted); font-size: .7rem; }
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  min-width: 240px;
  padding: 8px;
  display: none;
  z-index: 100;
}
.user-dropdown.open { display: block; }
.user-dropdown .menu-header {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 6px;
}
.user-dropdown .menu-header .email { font-weight: 600; font-size: .9rem; color: var(--text); word-break: break-all; }
.user-dropdown .menu-header .plan-line { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.user-dropdown .menu-item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.user-dropdown .menu-item:hover {
  background: var(--bg-muted);
  color: var(--text);
}
.user-dropdown .menu-divider {
  height: 1px;
  background: var(--hairline);
  margin: 6px 4px;
}
.user-dropdown .menu-item.danger { color: var(--danger); }
.user-dropdown .menu-item.danger:hover { background: rgba(239, 68, 68, 0.08); }

/* ── Page headings ─────────────────────────────────────────────────────── */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.page-header h1 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.page-header .sub {
  color: var(--muted);
  font-size: .92rem;
  margin-top: 4px;
}
.page-header .actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .88rem;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 4px 14px rgba(109, 40, 217, 0.32);
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 8px 20px rgba(109, 40, 217, 0.4);
}
.btn-primary:active:not(:disabled) { transform: scale(.98); }

.btn-secondary {
  background: var(--card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  color: var(--text);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--card-strong);
  box-shadow: var(--shadow-card);
}

.btn-ghost {
  color: var(--text-soft);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-muted);
  color: var(--text);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover:not(:disabled) { background: #dc2626; transform: translateY(-1px); }

.btn-link {
  background: transparent;
  border: none;
  color: var(--primary-deep);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: inherit;
}
.btn-link:hover { background: var(--bg-muted); color: var(--primary); }
.btn-link.btn-link-danger { color: var(--danger); }
.btn-link.btn-link-danger:hover { background: rgba(239, 68, 68, 0.08); }

/* ── Cards (glass) ─────────────────────────────────────────────────────── */

.glass-card {
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ── License cards ─────────────────────────────────────────────────────── */

.license-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.license-card {
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--primary-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
  box-shadow: var(--shadow-card);
}
.license-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}
.license-card.urgency-urgent  { border-left-color: var(--danger); }
.license-card.urgency-soon    { border-left-color: var(--warning); }
.license-card.urgency-ok      { border-left-color: var(--success); }
.license-card.urgency-none    { border-left-color: var(--hairline); }
.license-card.urgency-lapsed  { border-left-color: #7f1d1d; background: rgba(254, 226, 226, 0.7); }

.lc-row1 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.lc-name { font-weight: 700; font-size: 1rem; color: var(--text); line-height: 1.3; letter-spacing: -0.01em; }
.lc-meta { display: flex; gap: 14px; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.lc-loc::before    { content: '📍 '; opacity: .7; }
.lc-expiry::before { content: '⏱ '; opacity: .7; }
.lc-notes {
  margin-top: 8px;
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}
.lc-details {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 18px;
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
}
.lc-detail-row {
  display: flex;
  gap: 6px;
  font-size: .8rem;
  line-height: 1.5;
  min-width: 0;
}
.lc-detail-row dt {
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
}
.lc-detail-row dd {
  color: var(--text);
  font-weight: 600;
  word-break: break-word;
  min-width: 0;
}
.lc-detail-row dd a { color: var(--primary-deep); font-weight: 600; }
.lc-detail-row dd a:hover { color: var(--primary); }
.lc-actions { display: flex; gap: 2px; flex-shrink: 0; }

/* Status pills */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.status-active  { background: #ecfdf5; color: #065f46; }
.status-pending { background: #fef3c7; color: #92400e; }
.status-lapsed  { background: #fee2e2; color: #991b1b; }

/* ── Recommendations panel (Phase 6, retained) ─────────────────────────── */

.recs-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(245, 240, 255, 0.7));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.recs-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.recs-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--primary-deep);
}
.recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.recs-card {
  background: var(--card-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.recs-brand { font-weight: 700; color: var(--text); font-size: .96rem; margin-bottom: 6px; }
.recs-pitch { color: var(--muted); font-size: .84rem; line-height: 1.55; margin-bottom: 10px; }
.recs-cta { color: var(--primary-deep); font-weight: 700; font-size: .86rem; }
.recs-cta:hover { color: var(--primary); }
.recs-disclosure { margin-top: 10px; font-size: .7rem; color: var(--muted); font-style: italic; }

/* ── Document vault (compact, retained) ────────────────────────────────── */

.lc-docs {
  margin-top: 10px;
  border-top: 1px dashed var(--hairline);
  padding-top: 8px;
}
.lc-docs-toggle {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: inherit;
}
.lc-docs-toggle:hover { color: var(--primary-deep); }
.lc-docs-count {
  background: var(--bg-muted);
  color: var(--muted);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
}
.lc-docs.expanded .lc-docs-count { background: var(--primary); color: #fff; }
.lc-docs-chevron { font-size: .85rem; color: var(--muted); }
.doc-list { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.doc-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--card-strong);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
}
.doc-icon { font-size: 1.3rem; }
.doc-name { font-weight: 600; font-size: .88rem; color: var(--text); word-break: break-word; }
.doc-sub { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.doc-actions { display: flex; gap: 2px; flex-shrink: 0; }
.doc-empty { text-align: center; font-size: .82rem; color: var(--muted); font-style: italic; padding: 12px 0; }
.doc-dropzone {
  margin-top: 8px;
  border: 1.5px dashed var(--primary-soft);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  background: rgba(139, 92, 246, 0.04);
}
.doc-dropzone:hover, .doc-dropzone.drag-over {
  background: rgba(139, 92, 246, 0.08);
  border-color: var(--primary);
}
.doc-dz-icon { font-size: 1.5rem; }
.doc-dz-text { font-size: .85rem; color: var(--text); line-height: 1.4; }
.doc-dz-text strong { color: var(--primary-deep); }
.doc-dz-types { color: var(--muted); font-size: .74rem; }

/* ── Empty / loading states ────────────────────────────────────────────── */

.empty-state {
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius);
  padding: 56px 32px;
  text-align: center;
}
.empty-state .empty-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
  opacity: .8;
}
.empty-state h2 { font-size: 1.15rem; color: var(--text); margin-bottom: 8px; letter-spacing: -0.01em; }
.empty-state p { color: var(--muted); font-size: .92rem; max-width: 460px; margin: 0 auto 20px; line-height: 1.6; }
.loading-state {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.field label .optional {
  color: var(--muted);
  font-weight: 400;
  font-size: .76rem;
}
.field input[type="text"], .field input[type="email"], .field input[type="date"],
.field select, .field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-family: inherit;
  background: var(--card-strong);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
.field textarea { resize: vertical; min-height: 64px; }
.field-helper { font-size: .76rem; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.row-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
@media (max-width: 540px) { .row-2 { grid-template-columns: 1fr; } }

/* ── Modals ─────────────────────────────────────────────────────────────── */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 9, 30, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--card-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  max-width: 520px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
}
.modal.small { max-width: 420px; }
.modal.large { max-width: 620px; }
.modal-header {
  padding: 20px 22px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h2 { font-size: 1.15rem; margin: 0; letter-spacing: -0.01em; }
.modal-close {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.modal-close:hover { background: var(--bg-muted); color: var(--text); }
.modal-body { padding: 14px 22px 22px; }
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 22px;
}
.modal-msg {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  margin-top: 14px;
  display: none;
}
.modal-msg.show { display: block; }
.modal-msg.error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

/* Upgrade prompt inside modal */
.upgrade-prompt {
  background: linear-gradient(135deg, rgba(245, 240, 255, 0.9), rgba(255, 255, 255, 0.7));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
}
.upgrade-prompt .up-icon { font-size: 2rem; margin-bottom: 8px; }
.upgrade-prompt h3 { font-size: 1.05rem; color: var(--text); margin-bottom: 6px; letter-spacing: -0.01em; }
.upgrade-prompt p { color: var(--muted); font-size: .9rem; line-height: 1.55; margin-bottom: 14px; }
.upgrade-prompt .up-benefits {
  list-style: none;
  padding: 0;
  margin: 0 auto 18px;
  text-align: left;
  max-width: 320px;
  font-size: .86rem;
  color: var(--text);
}
.upgrade-prompt .up-benefits li { padding: 4px 0; }
.upgrade-prompt .up-benefits li::before {
  content: '✓ ';
  color: var(--success);
  font-weight: 700;
  margin-right: 4px;
}
.upgrade-prompt .up-cta {
  display: inline-block;
  width: 100%;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff !important;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.32);
}
.upgrade-prompt .up-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(109, 40, 217, 0.4); text-decoration: none; }

/* Autocomplete */
.ac-wrap { position: relative; }
.ac-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  max-height: 280px;
  overflow-y: auto;
  z-index: 10;
}
.ac-row { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--hairline); }
.ac-row:last-child { border-bottom: none; }
.ac-row:hover { background: var(--bg-muted); }
.ac-row strong { display: block; font-size: .9rem; color: var(--text); font-weight: 600; }
.ac-row .ac-cat { font-size: .74rem; color: var(--muted); margin-top: 2px; text-transform: capitalize; }
.ac-row.ac-custom { background: rgba(139, 92, 246, 0.06); }
.ac-row.ac-custom strong { color: var(--primary-deep); }

/* ── Toasts ─────────────────────────────────────────────────────────────── */

.welcome-toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  font-size: .9rem;
  font-weight: 600;
  z-index: 300;
  opacity: 0;
  transition: opacity .3s, transform .3s;
}
.welcome-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Pricing page ──────────────────────────────────────────────────────── */

.pricing-wrap { padding: 56px 28px; max-width: 1000px; margin: 0 auto; }
.pricing-header { text-align: center; margin-bottom: 36px; }
.pricing-header h1 {
  font-size: 2.4rem;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--text) 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  margin-bottom: 10px;
}
.pricing-sub { font-size: 1.05rem; color: var(--muted); max-width: 520px; margin: 0 auto; }
.canceled-banner {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  color: #92400e;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  text-align: center;
  margin-bottom: 24px;
  font-size: .9rem;
  font-weight: 600;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 40px;
}
.price-card {
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.price-card.highlighted {
  border: 1px solid var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-lift);
}
.price-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: linear-gradient(135deg, var(--accent), #d97706);
  color: #1e293b;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}
.price-tag {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--primary-deep);
  margin-bottom: 8px;
}
.price-amount {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
}
.price-amount .period { font-size: 1rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.price-sub-line { color: var(--muted); font-size: .88rem; margin: 6px 0 22px; }
.price-features { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.price-features li {
  padding: 7px 0 7px 24px;
  font-size: .9rem;
  color: var(--text);
  position: relative;
  line-height: 1.5;
}
.price-features li::before {
  content: '✓';
  color: var(--success);
  font-weight: 800;
  position: absolute;
  left: 0;
}
.price-card .btn { width: 100%; }
.pricing-faq {
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 32px;
}
.pricing-faq h2 { font-size: 1.3rem; margin-bottom: 18px; color: var(--text); letter-spacing: -0.01em; }
.faq-row { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.faq-row:last-child { border-bottom: none; }
.faq-row strong { display: block; font-size: 1rem; color: var(--text); margin-bottom: 6px; }
.faq-row p { color: var(--muted); font-size: .9rem; line-height: 1.6; }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ── Toolkit page ──────────────────────────────────────────────────────── */

.toolkit-section { margin-bottom: 32px; }
.toolkit-section-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--primary-deep);
  margin-bottom: 12px;
}
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.toolkit-card {
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
  box-shadow: var(--shadow-card);
}
.toolkit-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.toolkit-brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.toolkit-brand { font-weight: 700; font-size: 1.05rem; color: var(--text); letter-spacing: -0.01em; }
.toolkit-tag {
  background: var(--bg-muted);
  color: var(--primary-deep);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.toolkit-pitch {
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.55;
  margin-bottom: 16px;
  flex: 1;
}
.toolkit-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-deep);
  font-weight: 700;
  font-size: .9rem;
  align-self: flex-start;
}
.toolkit-cta:hover { color: var(--primary); }
.toolkit-disclosure {
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ── Settings page ─────────────────────────────────────────────────────── */

.settings-stack { display: flex; flex-direction: column; gap: 16px; }
.settings-card {
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.settings-card h2 {
  font-size: 1.05rem;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.settings-card .help { color: var(--muted); font-size: .86rem; margin-bottom: 16px; }
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  gap: 16px;
}
.settings-row:last-child { border-bottom: none; }
.settings-row .label { font-size: .85rem; color: var(--muted); }
.settings-row .value { font-weight: 600; color: var(--text); font-size: .9rem; }
.settings-card.danger { border-color: rgba(239, 68, 68, 0.2); }
.settings-card.danger h2 { color: var(--danger); }

/* ── Sign-in landing (unauth) ──────────────────────────────────────────── */

.signin-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  min-height: 100vh;
}
.signin-card {
  background: var(--card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lift);
}
.signin-card .brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.signin-card .brand-mark .logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
}
.signin-card .brand-mark .brand-name { color: var(--text); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
.signin-card h1 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.signin-card .subtitle { color: var(--muted); font-size: .92rem; margin-bottom: 28px; line-height: 1.5; }
.signin-card .helper-text { margin-top: 22px; font-size: .82rem; color: var(--muted); text-align: center; line-height: 1.55; }

/* Sign-in page brand mark. gradient logo box matching the in-app sidebar so
   the visual identity carries through from the auth screen into the app. Same
   styling rule lives at .app-sidebar .brand-mark .logo-box; we duplicate here
   instead of refactoring to a shared class because the surrounding contexts
   are different enough that future tweaks may need to diverge. */
.signin-card .brand-mark .logo-box {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  border: 2px solid var(--primary-soft);
  border-radius: 10px;
  font-weight: 800;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.msg { padding: 12px 14px; border-radius: var(--radius-sm); font-size: .9rem; margin-top: 16px; display: none; }
.msg.show { display: block; }
.msg.success { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.msg.error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

/* ── Legal pages ─────────────────────────────────────────────────────────── */

.legal-wrap {
  min-height: 100vh;
  padding: 48px 20px;
  max-width: 760px;
  margin: 0 auto;
}
.legal-card {
  background: var(--card-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 48px 44px;
  box-shadow: var(--shadow-card);
}
.legal-back {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 22px;
}
.legal-back:hover { color: var(--primary); }
.legal-card h1 {
  font-size: 2rem;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
  color: var(--text);
}
.legal-updated {
  color: var(--muted);
  font-size: .85rem;
  margin-bottom: 32px;
}
.legal-card section { margin-bottom: 32px; }
.legal-card h2 {
  font-size: 1.15rem;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.legal-card h3 {
  font-size: 1rem;
  margin: 16px 0 8px;
  color: var(--text);
}
.legal-card p {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-soft);
  margin-bottom: 12px;
}
.legal-card ul {
  margin: 8px 0 14px 22px;
  padding: 0;
}
.legal-card li {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.legal-card strong { color: var(--text); }
.legal-card a {
  color: var(--primary-deep);
  font-weight: 500;
}
.legal-card a:hover { color: var(--primary); text-decoration: underline; }

@media (max-width: 640px) {
  .legal-card { padding: 32px 24px; }
  .legal-card h1 { font-size: 1.5rem; }
}

/* ── Support tickets ─────────────────────────────────────────────────────── */

.ticket-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ticket-row {
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
  box-shadow: var(--shadow-card);
}
.ticket-row:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}
.ticket-row-subject {
  font-weight: 700;
  color: var(--text);
  font-size: .98rem;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.ticket-row-meta {
  font-size: .8rem;
  color: var(--muted);
}

.ticket-cat-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.ticket-cat-option {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--card);
  transition: background var(--t-fast), border-color var(--t-fast);
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
}
.ticket-cat-option input { display: none; }
.ticket-cat-option:has(input:checked) {
  background: rgba(139, 92, 246, 0.12);
  border-color: var(--primary);
  color: var(--primary-deep);
}
.ticket-cat-option:hover { background: var(--card-strong); }

.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.ticket-msg {
  background: var(--card-strong);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 18px;
  max-width: 85%;
}
.ticket-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(167, 139, 250, 0.04));
  border-color: var(--glass-border);
}
.ticket-msg-admin {
  align-self: flex-start;
  background: var(--card-strong);
}
.ticket-msg-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.ticket-msg-author {
  font-weight: 700;
  font-size: .85rem;
  color: var(--text);
}
.ticket-msg-time {
  font-size: .72rem;
  color: var(--muted);
}
.ticket-msg-body {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ticket-reply-form {
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.ticket-reply-form .modal-actions { margin-top: 12px; }

.ticket-closed-note {
  background: var(--bg-muted);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  font-style: italic;
}

.admin-filters {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.admin-filters a {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--card);
  border: 1px solid var(--glass-border);
}
.admin-filters a:hover { background: var(--card-strong); text-decoration: none; }
.admin-filters a.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

@media (max-width: 540px) {
  .ticket-cat-row { grid-template-columns: 1fr; }
  .ticket-msg { max-width: 100%; }
}

/* ── Admin stats dashboard ──────────────────────────────────────────────
   Tab nav at the top + responsive card grids for the various metrics.
   Hero row is 4-up on desktop, 2-up on tablet, 1-up on mobile. Secondary
   rows (growth + product) follow the same pattern but with smaller cards. */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0;
}
.admin-tabs a {
  padding: 10px 18px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-tabs a:hover { color: var(--text); text-decoration: none; }
.admin-tabs a.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.admin-loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
}

.admin-section-title {
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 700;
  margin: 28px 0 12px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}
.stat-grid-sm { grid-template-columns: repeat(4, 1fr); }
.stat-card {
  background: var(--card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius-md, 12px);
  padding: 18px 20px;
}
.stat-card-sm { padding: 14px 16px; }
.stat-label {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.stat-big {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-big-sm {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-sub {
  font-size: .8rem;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}

.admin-table-wrap {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
}
.admin-table th {
  background: rgba(124, 58, 237, 0.04);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr.row-deleted td {
  color: var(--muted);
  text-decoration: line-through;
  opacity: 0.65;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 999px;
}
.badge-grey  { background: #e5e7eb; color: #4b5563; }
.badge-blue  { background: #dbeafe; color: #1e40af; }
.badge-green { background: #d1fae5; color: #065f46; }

@media (max-width: 880px) {
  .stat-grid     { grid-template-columns: repeat(2, 1fr); }
  .stat-grid-sm  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stat-grid     { grid-template-columns: 1fr; }
  .stat-grid-sm  { grid-template-columns: repeat(2, 1fr); }
  .stat-big      { font-size: 1.6rem; }
  .admin-table th:nth-child(4),
  .admin-table td:nth-child(4) { display: none; }  /* hide "Last seen" on tiny screens */
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Hamburger button. base style first so the @media override below wins on
   mobile (CSS cascade: same-specificity rules go by source order). The
   margin-right:auto pushes the button to the left edge of the topbar (which is
   justify-content:flex-end), leaving the user avatar on the right. */
.mobile-menu-btn {
  display: none;
  background: var(--card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 1.2rem;
  cursor: pointer;
  margin-right: auto;
  align-items: center;
}

/* Sidebar backdrop. dims the page behind the slide-in sidebar on mobile so
   the menu reads as modal rather than floating. Tapping the backdrop closes
   the sidebar (handler in shell.js). Hidden until .open is added. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 35, 0.55);
  z-index: 150;
  opacity: 0;
  transition: opacity var(--t-med);
}
.sidebar-backdrop.open { display: block; opacity: 1; }

@media (max-width: 880px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--t-med);
    z-index: 200;
  }
  .app-sidebar.open { transform: translateX(0); }
  .app-content { padding: 20px; }
  .license-card { grid-template-columns: 1fr; }
  .lc-actions { justify-content: flex-end; }
  .mobile-menu-btn { display: flex; }
}

/* ── Dashboard onboarding ────────────────────────────────────────────────
   Welcome card explaining the product + tier comparison at the top of the
   dashboard for users who haven't dismissed it. Subtle purple gradient
   (matches sign-in / CTA palette) so it reads as informational, not as a
   promo banner. Hides on dismiss (localStorage flag). */
.welcome-card {
  position: relative;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1px solid #c4b5fd;
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 22px;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.08);
}
.welcome-card-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none; border: none;
  font-size: 1.3rem;
  color: #7c3aed;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0.7;
  transition: opacity .15s, background .15s;
}
.welcome-card-close:hover { opacity: 1; background: rgba(124, 58, 237, 0.08); }
.welcome-card-eyebrow {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7c3aed;
  font-weight: 700;
  margin-bottom: 6px;
}
.welcome-card-title {
  font-size: 1.25rem;
  color: #1e1b2e;
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.welcome-card-body {
  font-size: .95rem;
  color: #4c1d95;
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 720px;
}
.welcome-card-plan {
  font-size: .88rem;
  color: #6b21a8;
  line-height: 1.55;
  margin: 0;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  max-width: 720px;
}

/* "Next reminder" pill in the dashboard header. Compact, tabular, lives to
   the left of the Archive / + Add license buttons. Empty state (no licenses)
   uses muted styling to suggest dormant rather than broken. */
/* Title row groups the H1 and the next-reminder pill horizontally so the pill
   sits immediately to the right of "Your licenses". On narrow viewports the
   pill wraps below the title. */
.page-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.next-email-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  font-size: .85rem;
}
.next-email-icon { font-size: 1.1rem; line-height: 1; }
.next-email-text { display: flex; flex-direction: column; line-height: 1.2; }
.next-email-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 700;
}
.next-email-value {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.next-email-empty .next-email-value {
  color: var(--muted);
  font-weight: 500;
  font-size: .82rem;
}

@media (max-width: 640px) {
  /* Hide the "Next reminder" pill on small mobile screens. the dashboard
     header is already tight with the avatar + hamburger; the pill lives
     visually in the same row. Users still see all reminder context in the
     welcome card and the empty state. */
  .next-email-pill { display: none; }
  .welcome-card { padding: 18px 20px; }
  .welcome-card-title { font-size: 1.1rem; }
}

/* Admin user-detail page bits. The link styling makes user-email cells in
   the recent-signups table read as drill-downs rather than plain text. */
.admin-user-link {
  color: var(--primary-deep);
  font-weight: 600;
  text-decoration: none;
}
.admin-user-link:hover { color: var(--primary); text-decoration: underline; }
.admin-empty-note {
  color: var(--muted);
  font-style: italic;
  font-size: .9rem;
  padding: 14px 0;
}

/* In-flight applications section on the dashboard. Compact list-of-rows so
   a user with 5 applications-in-progress still sees their renewing licenses
   below without scrolling forever. */
.inflight-section {
  margin: 0 0 28px;
  padding: 20px 22px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fcd34d;
  border-radius: 14px;
}
.inflight-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.inflight-head h2 {
  font-size: 1.1rem;
  color: #78350f;
  margin: 0;
}
.inflight-link {
  color: #78350f;
  font-weight: 600;
  font-size: .88rem;
}
.inflight-link:hover { color: #92400e; }
.inflight-list { display: grid; gap: 8px; }
.inflight-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(146, 64, 14, .15);
  border-radius: 10px;
  color: #78350f;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.inflight-row:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 2px 8px rgba(146, 64, 14, .1);
  text-decoration: none;
}
.inflight-row-title { font-weight: 700; font-size: .95rem; color: #78350f; }
.inflight-row-meta { font-size: .8rem; color: #92400e; opacity: .8; margin-top: 2px; text-transform: capitalize; }
.inflight-row-decision { font-size: .85rem; font-weight: 600; color: #78350f; font-variant-numeric: tabular-nums; }

/* Admin stats. 14-day trend chart. Inline SVG, no external lib. Lives in a
   card that matches the stat-card aesthetic so it slots in cleanly. */
.trend-chart {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md, 12px);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.trend-chart-empty {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md, 12px);
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}
.trend-legend {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 8px;
  font-size: .82rem;
  color: var(--text-soft);
  flex-wrap: wrap;
}
.trend-legend-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.trend-legend-item strong { color: var(--text); font-variant-numeric: tabular-nums; }
.trend-legend-meta { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; margin-left: auto; }
.trend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Interactive chart controls: metric dropdown + date range + quick-range
   buttons. Two-row flex on mobile, single row on desktop. */
.trend-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}
.trend-controls-left, .trend-controls-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
}
.trend-label {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.trend-label select,
.trend-label input[type="date"] {
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
  background: var(--card-strong, #fff);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 34px;
}
.trend-label select:focus,
.trend-label input[type="date"]:focus {
  outline: none;
  border-color: var(--accent, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.trend-quick {
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--card-strong, #fff);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.trend-quick:hover {
  background: var(--card);
  color: var(--text);
}
.trend-chart-svg-wrap {
  position: relative;
}
.trend-chart-tooltip {
  position: absolute;
  z-index: 5;
  background: rgba(28, 25, 38, 0.96);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .8rem;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  min-width: 180px;
}
.trend-tooltip-date { font-weight: 700; margin-bottom: 4px; font-size: .76rem; opacity: .85; }
.trend-tooltip-row { display: flex; align-items: center; gap: 6px; font-size: .82rem; }
.trend-tooltip-row strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.trend-tooltip-sub { margin-top: 4px; font-size: .72rem; opacity: .7; font-variant-numeric: tabular-nums; }

/* Users tab — toolbar + pagination. Mirrors the admin-filters look so the
   page feels consistent with the support tab. */
.users-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 14px;
}
.users-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}
.users-toolbar-right {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.users-search {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.users-search input[type="search"] {
  font-family: inherit;
  font-size: .9rem;
  color: var(--text);
  background: var(--card-strong, #fff);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 7px 12px;
  min-width: 220px;
  min-height: 34px;
}
.users-search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.users-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 12px 0;
}
.users-pagination-info {
  font-size: .82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.users-pagination-controls {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.users-page-btn {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--card-strong, #fff);
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  padding: 5px 10px;
  min-width: 32px;
  text-align: center;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.users-page-btn:hover {
  background: var(--card);
  color: var(--text);
  text-decoration: none;
}
.users-page-btn.active {
  background: var(--accent, #7c3aed);
  border-color: var(--accent, #7c3aed);
  color: #fff;
}
.users-page-btn.disabled {
  opacity: .4;
  cursor: not-allowed;
}
.users-ref-sub {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ── Admin marketing tab ────────────────────────────────────────────────
   Template gallery. Each card describes one email template + a test-send
   button. Single-column on narrow screens, 2-up on tablet+, so the text
   stays readable at any width. */
.marketing-grid {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
@media (min-width: 880px) {
  .marketing-grid { grid-template-columns: 1fr 1fr; }
}

.marketing-card {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius, 14px);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.marketing-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.marketing-card-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.marketing-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}
.marketing-card-subject {
  font-size: .82rem;
  color: var(--muted);
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
}
.marketing-card-trigger {
  font-size: .85rem;
  color: var(--text-soft);
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(124, 58, 237, 0.06);
  border-radius: 8px;
}
.marketing-card-trigger strong { color: var(--primary-deep); }
.marketing-card-desc {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.marketing-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.marketing-status {
  font-size: .82rem;
  color: var(--success, #16a34a);
  font-weight: 600;
}
.marketing-status-err { color: var(--danger, #dc2626); }