/* ============================================================================
 * mk-account.css — Phase E v6.1 buyer-only WC My Account dashboard.
 *
 * Loaded after mk-homepage.css. Reuses the same v6 design tokens for visual
 * consistency. Mobile-first; respects prefers-reduced-motion.
 * ============================================================================ */

.mk-account {
  position: relative;
  padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 32px);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(11, 18, 36, 0.88) 0%, rgba(5, 7, 22, 0.94) 100%);
  border: 1px solid var(--mk-hp-card-edge, rgba(155, 196, 255, 0.18));
  color: var(--mk-hp-text, #eef3ff);
  box-shadow: 0 30px 80px -20px rgba(7, 11, 30, 0.7);
  margin-bottom: 32px;
}
.mk-account-bg { position: absolute; inset: 0; pointer-events: none; }
.mk-account-bg-glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.45; }
.mk-account-bg-glow--cyan   { top: -20%; right: -10%; width: 50%; height: 60%; background: radial-gradient(circle, rgba(0, 229, 255, 0.40), transparent 70%); }
.mk-account-bg-glow--violet { bottom: -20%; left: -10%; width: 50%; height: 60%; background: radial-gradient(circle, rgba(139, 92, 246, 0.40), transparent 70%); }

.mk-account-header { position: relative; z-index: 1; max-width: 720px; margin: 0 0 28px; }
.mk-account-header .mk-eyebrow {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(155, 196, 255, 0.22);
  background: rgba(155, 196, 255, 0.06);
  color: var(--mk-hp-cyan, #00e5ff);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.mk-account-title {
  margin: 14px 0 8px;
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mk-hp-text, #eef3ff);
}
.mk-account-lead {
  margin: 0;
  max-width: 580px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mk-hp-muted, rgba(186, 200, 230, 0.78));
}

/* Grid */
.mk-account-grid {
  position: relative; z-index: 1;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .mk-account-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .mk-account-grid { grid-template-columns: repeat(6, 1fr); }
  .mk-account-card--overview { grid-column: span 2; }
  .mk-account-card--license  { grid-column: span 4; }
  .mk-account-card--orders   { grid-column: span 6; }
  .mk-account-card--upgrade  { grid-column: span 3; }
  .mk-account-card--tools    { grid-column: span 3; }
  .mk-account-card--support  { grid-column: span 3; }
}

/* Card shell */
.mk-account-card {
  position: relative; isolation: isolate;
  padding: clamp(18px, 2vw, 26px);
  border-radius: 18px;
  background: var(--mk-hp-card-bg, rgba(14, 20, 38, 0.78));
  border: 1px solid var(--mk-hp-card-edge, rgba(155, 196, 255, 0.18));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.mk-account-card:hover { border-color: var(--mk-hp-card-edge-hover, rgba(0, 229, 255, 0.45)); }
.mk-account-card-bg {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 35%);
}

.mk-account-card h3 {
  margin: 12px 0 14px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mk-hp-text, #eef3ff);
}
.mk-account-card p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mk-hp-muted, rgba(186, 200, 230, 0.78));
}

.mk-account-card-head {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

/* Status pills */
.mk-account-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(155, 196, 255, 0.22);
  background: rgba(155, 196, 255, 0.06);
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mk-hp-faint, rgba(186, 200, 230, 0.55));
}
.mk-account-pill--lite       { color: var(--mk-hp-green, #14f195);  border-color: rgba(20, 241, 149, 0.40); background: rgba(20, 241, 149, 0.10); }
.mk-account-pill--advanced   { color: var(--mk-hp-cyan, #00e5ff);   border-color: rgba(0, 229, 255, 0.45); background: rgba(0, 229, 255, 0.10); }
.mk-account-pill--demo       { color: var(--mk-hp-faint, rgba(186, 200, 230, 0.65)); border-color: rgba(155, 196, 255, 0.30); }
.mk-account-pill--active,
.mk-account-pill--processing,
.mk-account-pill--completed  { color: var(--mk-hp-green, #14f195);  border-color: rgba(20, 241, 149, 0.40); background: rgba(20, 241, 149, 0.10); }
.mk-account-pill--pending,
.mk-account-pill--on-hold    { color: var(--mk-hp-orange, #f59e0b); border-color: rgba(245, 158, 11, 0.40); background: rgba(245, 158, 11, 0.10); }
.mk-account-pill--expired,
.mk-account-pill--revoked,
.mk-account-pill--failed,
.mk-account-pill--cancelled,
.mk-account-pill--refunded   { color: var(--mk-hp-red, #ef4444);    border-color: rgba(239, 68, 68, 0.40);  background: rgba(239, 68, 68, 0.10); }
.mk-account-pill--neutral    { color: var(--mk-hp-faint, rgba(186, 200, 230, 0.65)); }

/* Meta list */
.mk-account-meta {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.mk-account-meta dt { color: var(--mk-hp-faint, rgba(186, 200, 230, 0.55)); font-weight: 700; }
.mk-account-meta dd { margin: 0; color: var(--mk-hp-text, #eef3ff); font-weight: 600; word-break: break-word; }
.mk-account-meta a  { color: var(--mk-hp-cyan, #00e5ff); text-decoration: none; }
.mk-account-meta a:hover { text-decoration: underline; }

/* License key block */
.mk-account-license-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(8, 14, 30, 0.6);
  border: 1px solid rgba(0, 229, 255, 0.30);
}
.mk-account-license-key code {
  flex: 1 1 100%;
  font-family: ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mk-hp-cyan, #00e5ff);
  word-break: break-all;
}
@media (min-width: 480px) { .mk-account-license-key code { flex: 1 1 auto; } }

.mk-account-note {
  margin: 0;
  font-size: 11px;
  color: var(--mk-hp-faint, rgba(186, 200, 230, 0.55));
}

/* Buttons */
.mk-account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mk-account-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.22s var(--mk-ease-expo, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 0.22s var(--mk-ease-expo, cubic-bezier(0.16, 1, 0.3, 1)), border-color 0.22s var(--mk-ease-expo, cubic-bezier(0.16, 1, 0.3, 1)), background 0.22s var(--mk-ease-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
/* v6.2.0 polish — press-state scale on all account buttons. */
.mk-account-btn--primary:active,
.mk-account-btn--ghost:active,
.mk-account-btn--mini:active {
  transform: scale(var(--mk-press-scale, 0.97));
}
.mk-account-btn--primary {
  background: linear-gradient(135deg, var(--mk-hp-cyan, #00e5ff), var(--mk-hp-violet, #8b5cf6) 60%, var(--mk-hp-green, #14f195));
  color: #02030a;
  box-shadow: 0 14px 36px -10px rgba(0, 229, 255, 0.50);
}
.mk-account-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 48px -10px rgba(0, 229, 255, 0.65); }

.mk-account-btn--ghost {
  background: rgba(155, 196, 255, 0.06);
  color: var(--mk-hp-text, #eef3ff);
  border-color: rgba(155, 196, 255, 0.30);
}
.mk-account-btn--ghost:hover { transform: translateY(-2px); border-color: var(--mk-hp-cyan, #00e5ff); }

.mk-account-btn--mini {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(155, 196, 255, 0.10);
  color: var(--mk-hp-text, #eef3ff);
  border-color: rgba(155, 196, 255, 0.20);
}
.mk-account-btn--mini:hover { background: rgba(0, 229, 255, 0.16); border-color: var(--mk-hp-cyan, #00e5ff); }

/* Orders table */
.mk-account-orders { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(155, 196, 255, 0.10); background: rgba(8, 14, 30, 0.50); }
.mk-account-orders-table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 13px; }
.mk-account-orders-table th,
.mk-account-orders-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(155, 196, 255, 0.08);
  color: var(--mk-hp-text, #eef3ff);
}
.mk-account-orders-table thead th {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-hp-faint, rgba(186, 200, 230, 0.55));
  background: rgba(0, 229, 255, 0.04);
}
.mk-account-orders-table tbody tr:last-child th,
.mk-account-orders-table tbody tr:last-child td { border-bottom: 0; }
.mk-account-orders-table tbody tr:nth-child(even) td,
.mk-account-orders-table tbody tr:nth-child(even) th { background: rgba(155, 196, 255, 0.02); }

.mk-account-empty {
  margin: 0; padding: 14px 16px;
  border-radius: 10px;
  background: rgba(155, 196, 255, 0.04);
  border: 1px dashed rgba(155, 196, 255, 0.20);
  color: var(--mk-hp-muted, rgba(186, 200, 230, 0.78));
  font-size: 13px;
}

/* Customer quick links */
.mk-account-tool-list {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}
.mk-account-tool-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(155, 196, 255, 0.16);
  background: rgba(8, 14, 30, 0.42);
  color: var(--mk-hp-text, #eef3ff);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.22s var(--mk-ease-expo, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color 0.22s var(--mk-ease-expo, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.22s var(--mk-ease-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.mk-account-tool-list a::after {
  content: ">";
  color: var(--mk-hp-cyan, #00e5ff);
  font-size: 14px;
  line-height: 1;
}
.mk-account-tool-list a:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 229, 255, 0.38);
  background: rgba(0, 229, 255, 0.10);
}

/* Gate (logged-out / no-purchase / demo-only) */
.mk-account-card--gate {
  text-align: center;
  padding: clamp(28px, 4vw, 48px);
}
.mk-account-card--gate .mk-account-pill { margin: 0 0 14px; }
.mk-account-card--gate h3 {
  font-size: clamp(20px, 2.4vw, 28px);
  margin: 0 0 12px;
}
.mk-account-card--gate .mk-account-actions { justify-content: center; }

.mk-account-support-line {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--mk-hp-muted, rgba(186, 200, 230, 0.78));
}
.mk-account-support-line a { color: var(--mk-hp-cyan, #00e5ff); text-decoration: none; }
.mk-account-support-line a:hover { text-decoration: underline; }

/* Reduced motion + print */
@media (prefers-reduced-motion: reduce) {
  .mk-account-btn, .mk-account-card, .mk-account-tool-list a { transition: none; }
  .mk-account-btn:hover, .mk-account-card:hover, .mk-account-tool-list a:hover { transform: none; }
  .mk-account-btn--primary:active,
  .mk-account-btn--ghost:active,
  .mk-account-btn--mini:active { transform: none; }
}
@media print {
  .mk-account, .mk-account-card { background: #fff; color: #000; border: 1px solid #ccc; box-shadow: none; }
  .mk-account-bg, .mk-account-card-bg { display: none; }
  .mk-account-btn { display: none; }
}