/**
 * Global Foundation Layer
 * 
 * Consolidated from:
 * - base.css (CSS resets, form styles, base elements)
 * - icons.css (Icon system and SVG utilities)
 * - artwork.css (Artwork, visual elements, patterns, backgrounds)
 * 
 * This is the global foundation layer. All brand-specific styles and
 * component styles should be imported AFTER this file.
 * 
 * Load order: tokens.css → global.css → components.css → themes.css → features.css
 */


/* ═══════════════════════════════════════════════════════════
   PART 1: CSS RESET & TYPOGRAPHY
   From: base.css
   ──────────────────────────────────────────────────────────
   Modern CSS reset and typography foundations
   ═══════════════════════════════════════════════════════════ */

/* ─── Modern CSS Reset ─────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  /* Prevent font size inflation */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  
  /* Smooth scrolling */
  scroll-behavior: smooth;
  
  /* Base font size */
  font-size: 16px;
}

/* Remove default margin and improve text rendering */
body {
  min-height: 100vh;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Design tokens */
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Remove built-in form typography styles */
input, button, textarea, select {
  font: inherit;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Improve line wrapping */
p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}


/* ─── Typography System ─────────────── */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-6);
}

h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-5);
}

h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

h4 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

h5 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

h6 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

p {
  margin-bottom: var(--space-4);
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

small {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

strong, b {
  font-weight: var(--font-semibold);
}

em, i {
  font-style: italic;
}

a {
  color: var(--text-link);
  text-decoration: underline;
  transition: var(--transition-colors);
}

a:hover {
  color: var(--text-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* WCAG 2.4.11 Focus Appearance — buttons and tab elements */
button:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-tertiary);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

pre {
  font-family: var(--font-mono);
  background: var(--bg-tertiary);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

pre code {
  background: none;
  padding: 0;
  border: none;
}


/* ═══════════════════════════════════════════════════════════
   PART 2: LAYOUT & FORM FOUNDATIONS
   From: base.css
   ──────────────────────────────────────────────────────────
   Container, accessibility, and form element base styles
   ═══════════════════════════════════════════════════════════ */

/* ─── Layout Utilities ─────────────── */

.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
}

/* Skip Link for Accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--interactive-primary);
  color: var(--text-inverse);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  z-index: calc(var(--z-modal) + 10);
}

.skip-link:focus {
  top: var(--space-4);
}


/* ─── Form Elements Base ─────────────── */

input, select, textarea {
  background: var(--bg-tertiary);
  border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--text-base);
  transition: var(--transition-colors);
  width: 100%;
  min-height: var(--input-height-md);
}

input:hover, select:hover, textarea:hover {
  border-color: var(--border-default);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

input:disabled, select:disabled, textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input[aria-invalid="true"], 
select[aria-invalid="true"], 
textarea[aria-invalid="true"] {
  border-color: var(--status-error);
}

input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  box-shadow: var(--shadow-focus-error);
}

/* Better styling for select dropdowns */
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a8a2c0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--space-3) center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: var(--space-10);
}

select option {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* label selector defined in components/forms.css */


/* ═══════════════════════════════════════════════════════════
   PART 3: LISTS & TABLES
   From: base.css
   ──────────────────────────────────────────────────────────
   List and table element styling
   ═══════════════════════════════════════════════════════════ */

/* ─── Lists ─────────────── */

ul, ol {
  list-style-position: inside;
  margin-bottom: var(--space-4);
}

ul ul, ol ol, ul ol, ol ul {
  margin-left: var(--space-6);
  margin-bottom: var(--space-2);
}


/* ─── Tables ─────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}

th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: var(--font-semibold);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-medium) solid var(--border-emphasis);
}

td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--border-subtle);
}

tr:hover td {
  background: var(--bg-tertiary);
}


/* ═══════════════════════════════════════════════════════════
   PART 4: ANIMATIONS & MOTION
   From: base.css
   ──────────────────────────────────────────────────────────
   Core animation definitions and motion preferences
   ═══════════════════════════════════════════════════════════ */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    transform: translateY(1rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scale-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   PART 5: PRINT STYLES
   From: base.css
   ──────────────────────────────────────────────────────────
   Media print optimization for paper output
   ═══════════════════════════════════════════════════════════ */

@media print {
  *,
  *::before,
  *::after {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}


/* ═══════════════════════════════════════════════════════════
   PART 6: ICON SYSTEM
   From: icons.css
   ──────────────────────────────────────────────────────────
   SVG icon definitions and icon utility classes
   ═══════════════════════════════════════════════════════════ */

/* ─── Icon Base Styles ─────────────── */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  fill: currentColor;
  flex-shrink: 0;
}

.icon-sm {
  width: 1em;
  height: 1em;
}

.icon-lg {
  width: 1.5em;
  height: 1.5em;
}

.icon-xl {
  width: 2em;
  height: 2em;
}

/* Icon colors */
.icon-red { color: var(--color-porsche-red); }
.icon-gold { color: var(--color-gold); }
.icon-white { color: var(--color-white); }
.icon-muted { color: var(--text-tertiary); }

/* ─── SVG Icon Definitions ─────────────── */

/* Logo Mark */
.icon-logo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10' opacity='0.3'/%3E%3Cpath d='M12 2 L12 22 M2 12 L22 12' stroke-width='1'/%3E%3Ccircle cx='12' cy='12' r='4' fill='currentColor' opacity='0.8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  display: inline-block;
}

/* Calculate / Chart */
.icon-chart::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Profile / User */
.icon-profile::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Time / Rectify */
.icon-time::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Clusters / Group */
.icon-cluster::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* SMS / Message */
.icon-sms::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Transit / Orbit */
.icon-transit::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2' fill='currentColor'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Saved / Archive */
.icon-archive::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h18v18H3zM9 9h6'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Energy / Lightning */
.icon-energy::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Success / Check */
.icon-check::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Star / Featured */
.icon-star::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Compass / Direction */
.icon-compass::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Target / Focus */
.icon-target::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Calendar */
.icon-calendar::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Key */
.icon-key::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Numbers / Hash */
.icon-numbers::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cline x1='10' y1='3' x2='8' y2='21'/%3E%3Cline x1='16' y1='3' x2='14' y2='21'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Sparkle / Magic */
.icon-sparkle::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3m0 12v3M3 12h3m12 0h3M6.5 6.5l2.121 2.121M15.379 15.379l2.121 2.121M6.5 17.5l2.121-2.121M15.379 8.621l2.121-2.121'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Fire / Forge */
.icon-fire::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Light bulb / Ideas */
.icon-lightbulb::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M15 8a3 3 0 1 0-6 0c0 2 3 4 3 4s3-2 3-4z'/%3E%3Cpath d='M12 2v2M17.66 4.34l-1.41 1.41M20 12h2M17.66 19.66l-1.41-1.41M4.34 19.66l1.41-1.41M2 12h2M4.34 4.34l1.41 1.41'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Partnership / Handshake */
.icon-partnership::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Info / Help */
.icon-info::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
  opacity: 0.6;
}

/* ─── UI Control Icons (UX-025) ─────────────────────────── */

/* Bell / Notification */
.icon-bell::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Lock / Security */
.icon-lock::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Shield / Protection */
.icon-shield::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Gear / Settings */
.icon-gear::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Moon / Lunar / Theme toggle */
.icon-moon::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Search / Directory */
.icon-search::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Trophy / Achievements */
.icon-trophy::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Folder / Saved Charts */
.icon-folder::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Download / Install App */
.icon-download::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Users / Practitioners */
.icon-users::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Book / Knowledge base */
.icon-book::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Crystal / Gem */
.icon-crystal::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9z'/%3E%3Cpath d='M2 9h20'/%3E%3Cpath d='M6 3l4 6 2-6 2 6 4-6'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Telescope / Observation */
.icon-telescope::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='15' r='4'/%3E%3Ccircle cx='18' cy='15' r='4'/%3E%3Cpath d='M14 15h-4'/%3E%3Cpath d='M6 11V7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v4'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Brain / Mind authority */
.icon-brain::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96-.46 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2z'/%3E%3Cpath d='M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96-.46 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Shuffle / Rendition cycle */
.icon-shuffle::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 3 21 3 21 8'/%3E%3Cline x1='4' y1='20' x2='21' y2='3'/%3E%3Cpolyline points='21 16 21 21 16 21'/%3E%3Cline x1='15' y1='15' x2='21' y2='21'/%3E%3Cline x1='4' y1='4' x2='9' y2='9'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* ─── Action Icons (UX-026) ─────────────────────────────── */

/* Menu / Hamburger */
.icon-menu::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Close / Dismiss */
.icon-close::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Chevron Down */
.icon-chevron-down::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Chevron Right */
.icon-chevron-right::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Refresh / Reload */
.icon-refresh::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'/%3E%3Cpath d='M3.51 15a9 9 0 1 0 .49-4.95'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Plus / Add */
.icon-plus::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* External Link */
.icon-external-link::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* ─── Mood Resonance Icons — Energy Field States (UX-027) ── */

/* Mood 1 — Dormant (single nucleus point) */
.icon-mood-1::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Mood 2 — Stirring (nucleus + inner ring) */
.icon-mood-2::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Mood 3 — Flowing (nucleus + 2 rings) */
.icon-mood-3::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Mood 4 — Radiating (nucleus + 3 rings) */
.icon-mood-4::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Mood 5 — Full Field (filled nucleus + 3 outer rings — peak resonance) */
.icon-mood-5::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2' fill='currentColor' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* ─── Planetary / Astronomical Icons (UX-028) ───────────── */

/* Sun — Sol (circle + centre dot) */
.icon-planet-sun::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='2' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Mercury (circle + horns above + cross below) */
.icon-planet-mercury::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='4'/%3E%3Cline x1='12' y1='15' x2='12' y2='21'/%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cpath d='M9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Venus — ♀ (circle + cross below) */
.icon-planet-venus::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cline x1='12' y1='15' x2='12' y2='21'/%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Mars — ♂ (circle + arrow upper-right) */
.icon-planet-mars::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='13' r='6'/%3E%3Cline x1='14.5' y1='8.5' x2='21' y2='2'/%3E%3Cpolyline points='16 2 21 2 21 7'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Jupiter — ♃ (stylised 4 with crossing arm) */
.icon-planet-jupiter::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' y1='3' x2='10' y2='21'/%3E%3Cline x1='4' y1='14' x2='20' y2='14'/%3E%3Cpath d='M20 14c0-6-4-10-10-11'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Saturn — ♄ (cross-staff + lower bowl) */
.icon-planet-saturn::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='3' x2='12' y2='16'/%3E%3Cline x1='8' y1='8' x2='16' y2='8'/%3E%3Cpath d='M8 16c0 3.3 1.8 5 4 5s4-1.7 4-5'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Uranus — ♅ (circle + cross + side staffs) */
.icon-planet-uranus::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='12' y1='16' x2='12' y2='21'/%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='6' y1='9' x2='6' y2='14'/%3E%3Cline x1='18' y1='9' x2='18' y2='14'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Neptune — ♆ (trident) */
.icon-planet-neptune::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='12' x2='12' y2='21'/%3E%3Cpath d='M7 8a5 5 0 0 0 10 0'/%3E%3Cline x1='7' y1='8' x2='7' y2='4'/%3E%3Cline x1='12' y1='6' x2='12' y2='2'/%3E%3Cline x1='17' y1='8' x2='17' y2='4'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Pluto — ♇ (circle over arc + staff) */
.icon-planet-pluto::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M8 12a4 4 0 0 0 8 0'/%3E%3Cline x1='12' y1='16' x2='12' y2='21'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* North Node — ☊ (horseshoe open at bottom) */
.icon-planet-node::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14a6 6 0 0 1 12 0'/%3E%3Ccircle cx='6' cy='14' r='1.5'/%3E%3Ccircle cx='18' cy='14' r='1.5'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* Chiron — ⚷ (circle + cross-staff) */
.icon-planet-chiron::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cpath d='M9 8h6'/%3E%3Cline x1='12' y1='8' x2='12' y2='21'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}

/* ─── Icon Utilities ─────────────── */

/* Inline icons with text */
.text-with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Icon button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.icon-btn:hover {
  background: var(--bg-tertiary);
}

.icon-btn:active {
  transform: scale(0.95);
}

/* Icon with badge/notification */
.icon-badge {
  position: relative;
}

.icon-badge::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: var(--color-porsche-red);
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
}


/* ═══════════════════════════════════════════════════════════
   PART 7: ARTWORK & VISUAL ELEMENTS
   From: artwork.css
   ──────────────────────────────────────────────────────────
   Artwork, backgrounds, patterns, and decorative elements
   ═══════════════════════════════════════════════════════════ */

/* ─── Fullscreen Background Video ─────────────── */

.bg-video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100vw;
  min-height: 100vh;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: -2;
  object-fit: cover;
  pointer-events: none;
  /* Darken the video so UI stays readable */
  opacity: 0.5;
  /* Smooth load-in */
  transition: opacity 1.5s ease-in;
}

/* Before video loads or if it fails, start invisible */
.bg-video:not([data-loaded]) {
  opacity: 0;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .bg-video {
    display: none;
  }
}

/* On low-power / mobile, hide video and rely on CSS particles */
@media (max-width: 768px) {
  .bg-video {
    display: none;
  }
}

/* Dark mode: reduce video opacity slightly so bright video frames
   don't reduce text-on-dark contrast (lesson: dark-mode-video-contrast) */
html[data-theme="dark"] .bg-video {
  opacity: 0.38;
}
@media (prefers-color-scheme: dark) {
  .bg-video {
    opacity: 0.38;
  }
}

/* Optional: dark overlay gradient on top of video for depth */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 0%, transparent 0%, rgba(5, 9, 26, 0.7) 70%),
    radial-gradient(ellipse at 50% 100%, rgba(11, 18, 38, 0.5) 0%, transparent 60%);
  pointer-events: none;
}

/* ─── Hero Artwork ─────────────── */

.hero-artwork {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: linear-gradient(135deg, 
    var(--color-near-black) 0%,
    var(--color-charcoal) 50%,
    var(--color-graphite) 100%
  );
}

.hero-artwork::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--gradient-mesh);
  opacity: 0.6;
  animation: rotate-slow 60s linear infinite;
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ─── Geometric Patterns ─────────────── */

.geometric-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.03;
  pointer-events: none; /* never intercept clicks meant for header buttons */
  background-image: 
    linear-gradient(30deg, transparent 49%, var(--white-alpha-08) 49%, var(--white-alpha-08) 51%, transparent 51%),
    linear-gradient(-30deg, transparent 49%, var(--white-alpha-08) 49%, var(--white-alpha-08) 51%, transparent 51%);
  background-size: 60px 60px;
}

/* Radial gradient accent */
.radial-accent {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 600px;
  background: radial-gradient(ellipse at top,
    rgba(213, 0, 28, 0.12) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

.radial-accent-gold {
  background: radial-gradient(ellipse at top,
    rgba(212, 175, 55, 0.08) 0%,
    transparent 60%
  );
}

/* ─── Card Artwork ─────────────── */

.card-with-art {
  position: relative;
  overflow: hidden;
}

.card-with-art::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle,
    rgba(213, 0, 28, 0.08) 0%,
    transparent 70%
  );
  opacity: 0.5;
  pointer-events: none;
}

/* ─── Abstract Shapes ─────────────── */

.abstract-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--white-alpha-06);
  pointer-events: none;
}

.abstract-circle-1 {
  width: 400px;
  height: 400px;
  top: -200px;
  right: -100px;
  opacity: 0.6;
}

.abstract-circle-2 {
  width: 600px;
  height: 600px;
  bottom: -300px;
  left: -150px;
  opacity: 0.3;
}

/* Orbital rings */
.orbital-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
}

.orbital-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid var(--white-alpha-10);
  transform: translate(-50%, -50%);
}

.orbital-ring:nth-child(1) {
  width: 100%;
  height: 100%;
  animation: orbit-1 20s linear infinite;
}

.orbital-ring:nth-child(2) {
  width: 70%;
  height: 70%;
  animation: orbit-2 15s linear infinite reverse;
}

.orbital-ring:nth-child(3) {
  width: 40%;
  height: 40%;
  animation: orbit-3 10s linear infinite;
}

@keyframes orbit-1 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbit-2 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbit-3 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ─── Chart Visualization Background ─────────────── */

.chart-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.06;
}

.chart-bg svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Energy Bodygraph silhouette */
.bodygraph-silhouette {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 250px;
  height: 400px;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3C!-- Head --%3E%3Ccircle cx='50' cy='20' r='15' fill='none' stroke='white' stroke-width='0.5'/%3E%3C!-- Throat --%3E%3Crect x='40' y='40' width='20' height='15' fill='none' stroke='white' stroke-width='0.5'/%3E%3C!-- G Center --%3E%3Ccircle cx='50' cy='80' r='12' fill='none' stroke='white' stroke-width='0.5'/%3E%3C!-- Sacral --%3E%3Crect x='42' y='95' width='16' height='20' fill='none' stroke='white' stroke-width='0.5'/%3E%3C!-- Root --%3E%3Crect x='40' y='120' width='20' height='15' fill='none' stroke='white' stroke-width='0.5'/%3E%3C!-- Connecting channels --%3E%3Cline x1='50' y1='35' x2='50' y2='40' stroke='white' stroke-width='0.3'/%3E%3Cline x1='50' y1='55' x2='50' y2='68' stroke='white' stroke-width='0.3'/%3E%3Cline x1='50' y1='92' x2='50' y2='95' stroke='white' stroke-width='0.3'/%3E%3Cline x1='50' y1='115' x2='50' y2='120' stroke='white' stroke-width='0.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Interactive bodygraph: gate badge hover */
.bg-gate rect {
  transition: opacity 0.15s;
}
.bg-gate:hover rect {
  opacity: 1 !important;
  filter: brightness(1.3);
}
.bg-gate:active rect {
  filter: brightness(1.6);
}

/* ─── Astrological Wheel Background ─────────────── */

.zodiac-wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  opacity: 0.05;
  animation: rotate-slow 120s linear infinite;
}

.zodiac-wheel svg {
  width: 100%;
  height: 100%;
}

/* ─── Premium Dividers ─────────────── */

.divider-premium {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--white-alpha-14) 20%,
    var(--white-alpha-14) 80%,
    transparent 100%
  );
  margin: var(--space-8) 0;
}

.divider-premium::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: var(--color-porsche-red);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(213, 0, 28, 0.4);
}

.divider-gold::before {
  background: var(--color-gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

/* ─── Section Headers with Artwork ─────────────── */

.section-header-premium {
  position: relative;
  padding: var(--space-12) 0 var(--space-6);
  text-align: center;
}

.section-header-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 100px;
  background: radial-gradient(ellipse,
    rgba(213, 0, 28, 0.1) 0%,
    transparent 70%
  );
  z-index: -1;
}

.section-title-premium {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
}

.section-subtitle-premium {
  font-size: var(--text-md);
  color: var(--text-tertiary);
  font-weight: var(--weight-regular);
}

/* ─── Glow Effects ─────────────── */

.glow-red {
  box-shadow: var(--glow-red);
}

.glow-gold {
  box-shadow: var(--glow-gold);
}

.glow-text-red {
  text-shadow: 0 0 20px rgba(213, 0, 28, 0.5);
}

.glow-text-gold {
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

/* ─── Logo Lockup ─────────────── */

.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}


/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES  (CSP inline-style elimination layer)
   ──────────────────────────────────────────────────────────
   Replaces common style="..." attributes in JS-generated HTML.
   Use these classes in template literals instead of inline styles.
   Load order: last — these override component defaults intentionally.
   ═══════════════════════════════════════════════════════════ */

/* ─── Display ───────────────────────────────────────────── */
.u-hidden { display: none !important; }
.u-flex { display: flex; }
.u-flex-col { flex-direction: column; }
.u-flex-center { display: flex; align-items: center; }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-flex-wrap { flex-wrap: wrap; }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-text-center { text-align: center; }

/* ─── Typography ─────────────────────────────────────────── */
.u-text-sm { font-size: var(--font-size-sm); }
.u-text-xl { font-size: var(--font-size-xl); }
.u-font-bold { font-weight: 700; }
.u-font-600 { font-weight: 600; }
.u-font-500 { font-weight: 500; }
.u-font-italic { font-style: italic; }

/* ─── Color ──────────────────────────────────────────────── */
.u-text-gold { color: var(--gold, #c9a84c); }
.u-text-dim { color: var(--text-dim); }
.u-text-muted { color: var(--text-muted, #b3aec8); }
.u-text-success { color: var(--accent2); }

/* ─── Stat Card (checkin stats, dashboard widgets) ───────── */
.stat-card {
  background: var(--bg3);
  border: var(--border-width-thin) solid var(--border);
  border-radius: var(--space-2);
  padding: var(--space-3);
  text-align: center;
}
.stat-card__value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--gold);
}
.stat-card__label {
  font-size: var(--font-size-sm);
  color: var(--text-dim);
}

/* ─── Checkin History Row ────────────────────────────────── */
.checkin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: var(--border-width-thin) solid var(--border);
}
.checkin-row__date {
  font-size: var(--font-size-base);
  color: var(--text-dim);
}
.checkin-row__badges {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-size-base);
}

/* ─── Notice / Empty State ───────────────────────────────── */
.u-notice {
  color: var(--text-dim);
  padding: var(--space-3);
  text-align: center;
}

/* ─── Skeleton width variants (skeleton-loader.js) ───────── */
.skeleton-w-80 { width: 80%; }
.skeleton-w-60 { width: 60%; }

/* ─── Wizard / Step progress divider ─────────────────────── */
.wizard-divider {
  flex: 0 1 20px;
  height: 1px;
  background: var(--border, #3a3a3f);
}

/* ─── Empty state list (ux-enhancements) ─────────────────── */
.u-list-check {
  margin-bottom: 8px;
}
.u-list-check:last-child {
  margin-bottom: 0;
}

/* ─── Wizard Progress (multi-step form indicator) ─────────── */
.wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--space-6, 48px);
  font-size: var(--font-size-sm, 14px);
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim, #b8a89c);
  font-weight: 600;
}
.wizard-step.active {
  color: var(--gold, #c9a84c);
}
.wizard-step__badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--border, #3a3a3f);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
.wizard-step.active .wizard-step__badge {
  background: var(--gold, #c9a84c);
  color: var(--bg1);
}