.data-protection-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--astrovia-blue);
  border-radius: var(--radius-full);
  opacity: 0.5;
}

.data-protection-item strong {
  color: var(--text-primary);
  font-weight: 600;
}

.user-result .credentials {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-md);
  background: var(--bg-surface);
  border: 1px dashed var(--success);
  border-radius: var(--radius-sm);
}

.user-result .credentials-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.user-result .credentials-row:last-child {
  margin-bottom: 0;
}

.user-result .credentials-label {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 80px;
}

.user-result .credentials-value {
  font-family: var(--font-mono);
  background: var(--bg-tertiary);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  color: var(--text-primary);
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--astrovia-blue);
  color: var(--text-on-brand);
  border: none;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.copy-btn:hover {
  background: var(--astrovia-blue-hover);
}

/* Account Panel Specific */
.account-info {
  background: var(--bg-section);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
}

.account-info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.account-info-row:last-child {
  border-bottom: none;
}

.account-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 100px;
}

.account-value {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.account-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-tool-pill {
  display: inline-flex;
  padding: 4px 12px;
  background: var(--badge-bg);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--astrovia-blue);
  font-weight: 500;
}

.account-section {
  margin-top: var(--space-xl);
}

.account-section h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.password-form {
  background: var(--bg-section);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

/* Generate Test Data Button - Matches c-btn-secondary design tokens */
.generate-test-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  box-shadow: var(--shadow-xs);
}

.generate-test-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--text-tertiary);
  box-shadow: var(--shadow-sm);
}

.generate-test-btn:active {
  box-shadow: var(--shadow-xs);
}

.generate-test-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.generate-test-btn svg {
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-default);
}

.generate-test-btn:hover svg {
  color: var(--text-primary);
}

/* Spin animation utility class */
.animate-spin {
  animation: spin 1s linear infinite;
}

/* Unified loading spinner container - uses loading bar */
.loading-spinner {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: none;
  letter-spacing: normal;
}

/* Inner loading bar for .loading-spinner */
.loading-spinner-bar {
  width: 120px;
  height: 4px;
  background: var(--border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.loading-spinner-bar-progress {
  height: 100%;
  width: 30%;
  background: var(--astrovia-blue);
  border-radius: var(--radius-full);
  animation: loadingSlide 1s ease-in-out infinite;
}

/* Tool access radio button styles for user management */
.tool-access-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-lighter);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  margin-top: 8px;
}

.tool-access-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--border-lighter);
}

.tool-access-item:last-child {
  border-bottom: none;
}

.tool-access-name {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  min-width: 160px;
}

.tool-access-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tool-access-option {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.tool-access-option:hover {
  border-color: var(--border-accent);
  background: var(--bg-surface);
}

.tool-access-option input[type="radio"] {
  width: 12px;
  height: 12px;
  accent-color: var(--astrovia-blue);
  cursor: pointer;
  margin: 0;
}

.tool-access-option:has(input[value="full"]:checked) {
  background: var(--info-gradient);
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
}

.tool-access-option.dev:has(input:checked),
.tool-access-option:has(input[value="dev"]:checked) {
  background: var(--credit-gradient);
  border-color: var(--warning);
  color: var(--warning-text);
}

.tool-access-option:has(input[value="none"]:checked) {
  background: var(--bg-tertiary);
  border-color: var(--border-light);
  color: var(--text-tertiary);
}

@media (max-width: 900px) {
  .tool-access-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .tool-access-options {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Edit User Modal - Extended styles */
.modal-content {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-light);
}

.modal-header h3,
.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

/* Unified Modal Close Button - Design System */
.modal-close,
.modal-close-btn,
.ds-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  font-size: var(--text-lg);
  line-height: 1;
}

.modal-close:hover,
.modal-close-btn:hover,
.ds-modal-close:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-medium);
  color: var(--text-primary);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 20px 24px;
  border-top: 1px solid var(--border-lighter);
  background: var(--bg-primary);
}

.btn-cancel {
  padding: var(--space-sm) var(--space-lg);
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.btn-cancel:hover {
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}

.btn-danger {
  padding: 10px 20px;
  background: var(--error);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-on-brand);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.btn-danger:hover {
  background: var(--error-dark);
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .tool-checkboxes {
    grid-template-columns: 1fr;
  }
  
  .user-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .user-actions {
    width: 100%;
  }
  
  .user-action-btn {
    flex: 1;
  }
}

/* Responsive */
@media (max-width: 720px) {
  .tool-selector-btn {
    padding: 28px 24px;
    padding-top: 36px;
    gap: 18px;
  }
  
  .tool-badge-corner {
    top: 12px;
    right: 14px;
    padding: 3px 8px;
    font-size: var(--font-size-xs);
  }

  .tool-icon-badge {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .tool-icon {
    width: 24px;
    height: 24px;
  }

  .tool-title {
    font-size: var(--font-size-lg);
  }

  .tool-desc {
    font-size: var(--font-size-sm);
  }

  .tool-content-title {
    font-size: var(--font-size-3xl);
  }

  .tool-content-desc {
    font-size: var(--font-size-lg);
  }
  
  .duty-tax-results-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .duty-tax-results-order-value {
    text-align: left;
  }
}

/* Defensive rule: Hide any login-specific elements on main page */
.password-toggle,
#toggle-password,
#eye-icon,
#eye-off-icon {
  display: none !important;
}

/* ========================================
   New Sidebar & Auth Styles (Post-572d8c6)
   Sidebar Layout System - Apple-level Design
   ======================================== */

.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Sidebar - Unified calm OS aesthetic */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: var(--z-sticky);
  box-shadow: none;
  transition: width var(--duration-normal) var(--ease-default),
              min-width var(--duration-normal) var(--ease-default);
}

/* ========================================
   SIDEBAR BRAND ROW
   Unified calm OS brand anchor
   ======================================== */
.sidebar-header {
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar-logo-link {
  display: block;
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-default);
}

.sidebar-logo-link:hover {
  background: var(--sidebar-item-hover-bg);
}

.sidebar-logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.sidebar-logo-lockup {
  display: block;
  height: 22px;
  width: auto;
}

.sidebar-logo-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1;
}

.sidebar-logo-subtitle {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--sidebar-section-text);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
}

/* ========================================
   SIDEBAR NAVIGATION
   Unified calm navigation styling
   ======================================== */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0 0;
}

.sidebar-section {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-1);
}

/* First section (Dashboard) - no top margin needed */
.sidebar-section:first-child {
  margin-top: 0;
}

/* Section labels - unified styling */
.sidebar-section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sidebar-section-text);
  padding: var(--space-6) var(--space-3) var(--space-2);
  margin-bottom: var(--space-1);
}

/* ========================================
   SIDEBAR COLLAPSIBLE GROUPS
   ERP-style navigation grouping
   ======================================== */
.sidebar-group {
  padding: 0 var(--space-3);
  margin-bottom: var(--space-1);
}

.sidebar-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  font-family: inherit;
  color: var(--sidebar-section-text);
}

.sidebar-group-header:hover {
  background: var(--sidebar-item-hover-bg);
}

.sidebar-group-header-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sidebar-group-icon {
  font-size: var(--font-size-lg);
  color: var(--sidebar-item-icon);
}

.sidebar-group-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sidebar-section-text);
}

.sidebar-group-module-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  padding: var(--space-3) var(--space-3) 0;
  margin-bottom: calc(var(--space-1) * -1);
}

.sidebar-section-label {
  font-size: 10.5px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-quaternary);
  padding: 4px var(--space-4) 4px;
  margin-top: 16px;
  margin-bottom: 2px;
}

.sidebar-group:first-child .sidebar-section-label,
#nav-group-dashboard + .sidebar-group .sidebar-section-label {
  margin-top: 14px;
}

.sidebar-nav-subheader {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
}

.sidebar-nav-subheader:first-child {
  margin-top: 0;
}

.sidebar-group-chevron {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  transition: transform var(--duration-fast) var(--ease-default);
}

.sidebar-group.collapsed .sidebar-group-chevron {
  transform: rotate(-90deg);
}

.sidebar-group-items {
  overflow: hidden;
  transition: max-height var(--duration-normal) var(--ease-default);
  max-height: 500px;
  padding-left: var(--space-2);
}

.sidebar-group.collapsed .sidebar-group-items {
  max-height: 0;
}

.sidebar-group-items .sidebar-nav-item {
  padding-left: var(--space-4);
}

/* Dashboard group - no header, just the item */
#nav-group-dashboard {
  padding-top: 2px;
}

#nav-group-dashboard .sidebar-nav-item {
  padding-left: var(--space-3);
}

/* Navigation items - unified calm tokens */
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px var(--space-3);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  text-align: left;
  font-family: inherit;
  margin-bottom: 1px;
  color: var(--sidebar-item-text);
}

.sidebar-nav-item:hover {
  background: var(--sidebar-item-hover-bg);
  color: var(--sidebar-item-hover-text);
}

.sidebar-nav-item.active {
  background: var(--sidebar-item-active-bg);
  color: var(--sidebar-item-active-text);
  position: relative;
}

.sidebar-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--sidebar-item-icon-active);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.sidebar-nav-item.active .sidebar-nav-label {
  color: var(--sidebar-item-active-text);
  font-weight: var(--font-weight-semibold);
}

/* Navigation icon container - unified calm tokens */
.sidebar-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--sidebar-item-icon);
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-default);
}

.sidebar-nav-icon i {
  font-size: 17px;
  line-height: 1;
}

.sidebar-nav-item:hover .sidebar-nav-icon {
  color: var(--icon-hover);
}

.sidebar-nav-item.active .sidebar-nav-icon {
  color: var(--sidebar-item-icon-active);
}

/* Navigation label - consistent typography */
.sidebar-nav-label {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: inherit;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* NEW badge for sidebar nav items */
.sidebar-badge-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: var(--text-brand);
  color: var(--text-on-brand);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1;
  white-space: nowrap;
}

.theme-dark .sidebar-badge-new {
  background: rgba(107, 150, 255, 0.15);
  color: var(--text-brand);
}

/* Sidebar Plan Section - unified calm tokens */
.sidebar-plan-section {
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  background: transparent;
}

.plan-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  box-shadow: none;
  line-height: 1;
}

.plan-badge svg,
.plan-badge i {
  display: block;
  flex-shrink: 0;
  color: var(--text-tertiary);
  width: 14px;
  height: 14px;
}

.plan-badge.plan-pro {
  color: var(--blue-500);
}

.plan-badge.plan-pro svg,
.plan-badge.plan-pro i {
  color: var(--blue-500);
}

.plan-badge.plan-enterprise {
  color: var(--success-text);
}

.plan-badge.plan-enterprise svg,
.plan-badge.plan-enterprise i {
  color: var(--success-icon);
}

.plan-badge.plan-admin {
  color: var(--text-tertiary);
}

.plan-badge.plan-admin svg,
.plan-badge.plan-admin i {
  color: var(--text-tertiary);
}

.plan-name {
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: var(--font-size-xs);
  line-height: 1;
}

.plan-upgrade-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  line-height: 1;
  margin-left: auto;
}

.plan-upgrade-btn:hover {
  background: var(--btn-primary-bg-hover);
}

.plan-upgrade-btn.hidden {
  display: none;
}

/* Sidebar Footer - unified calm tokens */
.sidebar-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--sidebar-bg);
}

.sidebar-footer .sidebar-nav-item {
  flex: 1;
}

.sidebar-user-icon {
  background: transparent;
}

.sidebar-user-name {
  font-size: var(--font-size-sm);
}

.sidebar-signout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--neutral-100);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-tertiary);
  transition: all var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
}

.sidebar-signout-btn:hover {
  background: var(--error-bg);
  color: var(--error-text);
}

.sidebar-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--neutral-100);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-tertiary);
  transition: all var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
  position: relative;
}

.sidebar-theme-toggle:hover {
  background: var(--bg-interactive);
  color: var(--text-brand);
}

.sidebar-theme-toggle #theme-icon-dark {
  display: none;
}

.theme-dark .sidebar-theme-toggle #theme-icon-light {
  display: none;
}

.theme-dark .sidebar-theme-toggle #theme-icon-dark {
  display: block;
}

/* ========================================
   SIDEBAR COLLAPSE TOGGLE
   MonkOS-style collapsible sidebar
   ======================================== */
.sidebar-collapse-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-tertiary);
  transition: all var(--duration-fast) var(--ease-default);
  position: absolute;
  top: 28px;
  right: -16px;
  z-index: calc(var(--z-sticky) + 1);
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--shadow-1);
}

@media (min-width: 769px) {
  .sidebar-collapse-toggle {
    display: flex;
  }

  .sidebar:hover .sidebar-collapse-toggle,
  .sidebar-collapse-toggle:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar.is-collapsed .sidebar-collapse-toggle {
    opacity: 1;
    pointer-events: auto;
    right: -16px;
  }
}

.sidebar-collapse-toggle:hover {
  background: var(--bg-interactive);
  color: var(--text-brand);
  border-color: var(--blue-300);
}

.sidebar-collapse-toggle i {
  font-size: var(--font-size-lg);
  transition: transform var(--duration-normal) var(--ease-default);
}

.sidebar.is-collapsed .sidebar-collapse-toggle i {
  transform: rotate(180deg);
}

/* ========================================
   SIDEBAR COLLAPSED STATE
   72px icon-only mode with smooth transition
   ======================================== */
.sidebar.is-collapsed {
  width: var(--sidebar-collapsed-width);
  min-width: var(--sidebar-collapsed-width);
}

.sidebar.is-collapsed .sidebar-logo-subtitle,
.sidebar.is-collapsed .sidebar-logo-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity var(--duration-fast) var(--ease-default),
              width var(--duration-fast) var(--ease-default);
}

.sidebar.is-collapsed .sidebar-header {
  justify-content: center;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.sidebar-logo-icon {
  display: none;
}

.sidebar.is-collapsed .sidebar-logo-lockup {
  display: none;
}

.sidebar.is-collapsed .sidebar-logo-icon {
  display: block;
}

.sidebar.is-collapsed .sidebar-logo-link {
  display: flex;
  justify-content: center;
  padding: var(--space-1);
}

.sidebar.is-collapsed .sidebar-section-label,
.sidebar.is-collapsed .sidebar-group-label,
.sidebar.is-collapsed .sidebar-group-module-label,
.sidebar.is-collapsed .sidebar-nav-subheader,
.sidebar.is-collapsed .sidebar-group-chevron {
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.sidebar.is-collapsed .sidebar-nav-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.sidebar.is-collapsed .sidebar-badge-new {
  display: none;
}

.sidebar.is-collapsed .sidebar-nav-item {
  justify-content: center;
  padding: var(--space-2);
  position: relative;
}

.sidebar.is-collapsed .sidebar-nav-item[data-tooltip]:hover::after {
  display: block;
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--neutral-900);
  color: var(--neutral-0);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  z-index: var(--z-tooltip);
  pointer-events: none;
  box-shadow: var(--shadow-2);
  letter-spacing: 0;
}

.sidebar.is-collapsed .sidebar-group {
  padding: 0 var(--space-2);
}

.sidebar.is-collapsed .sidebar-group-header {
  justify-content: center;
  padding: var(--space-2);
}

.sidebar.is-collapsed .sidebar-group-header-content {
  justify-content: center;
}

.sidebar.is-collapsed .sidebar-group-items {
  padding-left: 0;
}

.sidebar.is-collapsed .sidebar-group-items .sidebar-nav-item {
  padding-left: var(--space-2);
}

.sidebar.is-collapsed .sidebar-logo-link {
  justify-content: center;
  padding: var(--space-2);
}

.sidebar.is-collapsed .sidebar-footer {
  flex-direction: column;
  padding: var(--space-2);
  gap: var(--space-2);
}

.sidebar.is-collapsed .sidebar-footer .sidebar-nav-item {
  flex: none;
  width: 100%;
}

.sidebar.is-collapsed .sidebar-user-name {
  display: none;
}

.sidebar.is-collapsed .sidebar-plan-section {
  justify-content: center;
  padding: var(--space-2);
}

.sidebar.is-collapsed .plan-name,
.sidebar.is-collapsed .plan-upgrade-btn {
  display: none;
}

.sidebar.is-collapsed .sidebar-subgroup-label,
.sidebar.is-collapsed .sidebar-subgroup-chevron {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.sidebar.is-collapsed .sidebar-subgroup-toggle {
  justify-content: center;
  padding: var(--space-2);
}

.sidebar.is-collapsed #nav-group-dashboard .sidebar-nav-item {
  padding-left: var(--space-2);
}

/* Mobile override: never apply collapsed width on small screens */
@media (max-width: 768px) {
  .sidebar.is-collapsed {
    width: 280px;
    min-width: 280px;
  }
  .sidebar.is-collapsed .sidebar-nav-label,
  .sidebar.is-collapsed .sidebar-section-label,
  .sidebar.is-collapsed .sidebar-logo-subtitle,
  .sidebar.is-collapsed .sidebar-group-label,
  .sidebar.is-collapsed .sidebar-badge-new {
    opacity: 1;
    width: auto;
    height: auto;
    overflow: visible;
    display: inline-flex;
  }
  .sidebar.is-collapsed .sidebar-nav-item {
    justify-content: flex-start;
    padding: var(--space-2) var(--space-3);
  }
}

/* Main Content Area - Unified calm tokens */
.main-content {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  background: var(--bg-app);
  padding: var(--page-padding-y) var(--page-padding-x);
  padding-bottom: 120px;
}

/* Tool View Layout Override - Reset legacy .c-shell spacing inside sidebar layout */
.content-view .c-shell {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  max-width: none;
  min-height: auto;
}

/* Ensure first child of content-view has no top margin (prevents layout gap) */
.content-view > *:first-child {
  margin-top: 0;
}

/* Content Views - Unified page width tokens */
.content-view {
  max-width: var(--page-max-width);
  margin: 0 auto;
  width: 100%;
  min-height: calc(100vh - 160px);
  position: relative;
}

/* Tool Content Inner - Optimized for form-heavy views */
.tool-content-inner {
  max-width: 1100px;
}

/* ========================================
   DEPRECATED LEGACY HEADER STYLES
   These patterns are deprecated - use .page-header instead
   Kept for backwards compatibility only
   ======================================== */
.content-header {
  margin-bottom: var(--space-xl);
  max-width: 1100px;
}

/* @deprecated - Use .page-header instead */
.page-title-tab {
  display: none; /* Hidden - use .page-header */
}

/* @deprecated - Use .page-header-icon instead */
.page-title-icon {
  display: none; /* Hidden - use .page-header-icon */
}

/* Compatibility: .title-content still used in some cards */
.title-content {
  flex: 1;
  min-width: 0;
}

/* Compatibility: .content-title used in inline contexts */
.content-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* Compatibility: .content-subtitle used in inline contexts */
.content-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Dashboard Welcome */
/* ========================================
   CANONICAL DASHBOARD HEADER LAYOUT vFinal
   Identity left (flex-grow), Clocks right (size-to-content)
   ======================================== */
.dashboard-unified-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-8);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--space-5) 0;
  margin-bottom: var(--space-6);
  box-shadow: none;
}

/* Identity Block - Avatar + Welcome text (optical vertical alignment) */
.dashboard-welcome-section {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 0 0 auto;
  min-width: 280px;
  position: relative;
  top: 2px;
}

/* Avatar - Canonical dashboard identity size (64px), neutral border for photos */
.dashboard-welcome-avatar {
  /* Increased 20% from 64px */
  width: 77px;
  height: 77px;
  border-radius: var(--radius-full);
  background: var(--bg-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-3xl);
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--avatar-border-photo);
  box-shadow: var(--avatar-shadow);
}

/* Blue border for placeholder/initial avatars */
.dashboard-welcome-avatar--placeholder {
  border-color: var(--blue-200);
}

.dashboard-welcome-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-welcome-content {
  flex: 1;
  min-width: 0;
}

/* Welcome title - Primary anchor with strong visual weight (1.5rem/24px) */
.dashboard-welcome-title {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1.3;
}

/* Subtitle - Clean secondary line (NO pill/badge, OS-level identity) */
.dashboard-welcome-subtitle {
  display: block;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  margin-top: 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Unified Clock Toolbar Container - Utility bar feel, size-to-content */
/* vFinal: Right-aligned, lighter styling, no stretch */
.dashboard-clocks-section {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: end;
  width: fit-content;
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-subtle);
}

/* Inline settings button within clocks module */
.world-clock-settings-btn-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--icon-muted);
  transition: all var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
  margin-left: auto;
}

.world-clock-settings-btn-inline:hover {
  background: var(--bg-surface-muted);
  color: var(--icon-primary);
}

.world-clock-settings-btn-inline svg,
.world-clock-settings-btn-inline i {
  width: 14px;
  height: 14px;
  font-size: var(--font-size-base);
}

/* Right Section - Connected Status + Settings */
.dashboard-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Header Connection Status Badge - Compact, informational metadata */
.header-connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  box-shadow: none;
  transition: all var(--duration-fast) var(--ease-default);
}

.header-connection-status.connected {
  color: var(--text-secondary);
  border-color: var(--border-light);
  background: transparent;
}

/* Remove status dot - use text only */
.header-status-dot {
  display: none;
}

.header-connection-status.connected .header-status-dot {
  display: none;
}

/* Header Sync Timestamp - Muted metadata */
.header-sync-timestamp {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--text-tertiary);
  white-space: nowrap;
  opacity: 0.8;
}

/* Header Sync Refresh Button */
.header-sync-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.header-sync-refresh-btn:hover {
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
  background: var(--bg-white);
  box-shadow: 0 2px 4px var(--astrovia-blue-subtle);
}

.header-sync-refresh-btn.refreshing svg {
  animation: spin 1s linear infinite;
}

/* Legacy - keeping for backwards compatibility */
.dashboard-welcome {
  display: none;
}

/* ========================================
   DASHBOARD HEADER RESPONSIVE BREAKPOINTS
   Phase 5: Tablet & Mobile adaptations
   ======================================== */

/* Tablet: Stack to single column, clocks below identity */
@media (max-width: 1024px) {
  .dashboard-unified-header {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .dashboard-clocks-section {
    justify-content: flex-start;
    width: 100%;
  }
  
  .world-clock-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: Reduce clock columns, tighter spacing */
@media (max-width: 768px) {
  .dashboard-unified-header {
    padding: var(--space-4) 0;
    gap: var(--space-4);
  }
  
  .dashboard-welcome-section {
    gap: var(--space-3);
    min-width: 0;
  }
  
  .dashboard-welcome-avatar {
  /* Increased 20% from 64px */
    width: var(--avatar-md);
    height: var(--avatar-md);
    font-size: var(--font-size-lg);
  }
  
  .dashboard-welcome-title {
    font-size: var(--font-size-base);
  }
  
  .dashboard-clocks-section {
    padding: var(--space-2) var(--space-3);
  }
  
  .world-clock-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .world-clock-item:nth-child(3) {
    display: none;
  }
  
  /* Remove orphan border from last visible item */
  .world-clock-item:nth-child(2) {
    border-right: none;
    padding-right: var(--space-4);
    margin-right: 0;
  }
}

/* Small mobile: Single clock column */
@media (max-width: 480px) {
  .world-clock-grid {
    grid-template-columns: 1fr;
  }
  
  .world-clock-item:nth-child(2),
  .world-clock-item:nth-child(3) {
    display: none;
  }
  
  /* Remove all dividers on smallest screens */
  .world-clock-item {
    border-right: none !important;
    padding-right: var(--space-4);
  }
}

/* World Clock Widget - Now part of unified header */
.world-clock-widget {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
  position: relative;
}

.world-clock-header {
  display: none;
}

.world-clock-settings-float {
  display: none;
}

.world-clock-settings-float:hover {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--astrovia-blue);
  transform: rotate(45deg);
}

.world-clock-settings-float svg {
  width: 14px;
  height: 14px;
}

.world-clock-title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.world-clock-settings-btn {
  display: none;
}

/* Settings button inside unified clock container */
/* Phase 4: Vertical divider before settings action cluster */
.world-clock-settings-btn-bordered {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--icon-primary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
  box-shadow: none;
  margin-left: var(--space-3);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-subtle);
}

.world-clock-settings-btn-bordered:hover {
  border-color: transparent;
  color: var(--icon-active);
  background: var(--astrovia-blue-subtle);
  box-shadow: none;
}

/* Phase 4: Equal-width CSS Grid for clock items */
.world-clock-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: center;
  padding: 0;
}

/* Clock Items - Even spacing, minimum width for readability */
/* Phase A Fix: Ensure consistent left padding and x-position alignment */
.world-clock-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-width: 140px;
  transition: all var(--duration-fast) var(--ease-default);
  cursor: default;
  box-shadow: none;
}

/* Spacing between clock cards */
.world-clock-item:not(:last-of-type) {
  position: relative;
  margin-right: 0;
}

.world-clock-item:hover {
  border-color: var(--border-card-hover);
}

.world-clock-item:hover .world-clock-time {
  color: var(--icon-hover);
}

.world-clock-location {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.world-clock-flag {
  font-size: var(--font-size-lg);
  line-height: 1;
}

.world-clock-location-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.world-clock-city {
  font-size: clamp(11px, 1.0vw, 12px);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

.world-clock-meta {
  font-size: clamp(10px, 0.9vw, 11px);
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  line-height: 1.1;
}

.world-clock-time {
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-default);
  line-height: 1;
}

/* Clock Settings Modal */
.clock-settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-default);
}

.clock-settings-modal.active {
  opacity: 1;
  visibility: visible;
}

.clock-settings-content {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transform: scale(0.95);
  transition: transform var(--duration-normal) var(--ease-default);
}

.clock-settings-modal.active .clock-settings-content {
  transform: scale(1);
}

.clock-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-lighter);
}

.clock-settings-header h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.clock-settings-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.clock-settings-close:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.clock-settings-search {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-lighter);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clock-search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-normal) var(--ease-default);
}

.clock-search-input-wrapper:focus-within {
  border-color: var(--astrovia-blue);
  background: var(--bg-white);
}

.clock-search-input-wrapper i {
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
}

.clock-search-input-wrapper input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  outline: none;
}

.clock-search-input-wrapper input::placeholder {
  color: var(--text-tertiary);
}

.clock-region-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clock-region-chip {
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.clock-region-chip:hover {
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
}

.clock-region-chip.active {
  background: var(--info-bg);
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
}

.clock-settings-body {
  padding: 16px 24px;
  max-height: 45vh;
  overflow-y: auto;
}

.clock-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--text-tertiary);
}

.clock-no-results i {
  font-size: var(--font-size-4xl);
}

.clock-no-results span {
  font-size: var(--font-size-sm);
}

.clock-timezone-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clock-timezone-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.clock-timezone-option:hover {
  background: var(--info-bg);
  border-color: var(--info-border);
}

.clock-timezone-option.selected {
  background: var(--info-bg);
  border-color: var(--astrovia-blue);
}

.clock-timezone-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--astrovia-blue);
}

.clock-timezone-info {
  flex: 1;
}

.clock-timezone-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.clock-timezone-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.clock-settings-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-lighter);
  background: var(--bg-subtle);
}

.clock-selected-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.clock-selected-count span {
  font-weight: 600;
  color: var(--astrovia-blue);
}

.clock-settings-actions {
  display: flex;
  gap: 12px;
}

.clock-settings-btn {
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.clock-settings-btn.secondary {
  background: var(--bg-white);
  border: none;
  color: var(--text-secondary);
}

.clock-settings-btn.secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--border-light);
}

.clock-settings-btn.primary {
  background: var(--astrovia-blue);
  border: 1px solid var(--astrovia-blue);
  color: var(--text-on-brand);
}

.clock-settings-btn.primary:hover {
  background: var(--blue-700);
  border-color: var(--blue-700);
}

@media (max-width: 768px) {
  .world-clock-widget {
    padding: 16px 18px;
  }
  
  .world-clock-item {
    min-width: 120px;
    padding: 12px 14px;
  }
  
  .world-clock-time {
    font-size: var(--font-size-2xl);
  }
}

/* Shopify Analytics Dashboard - Enhanced Design System */
/* Analytics Section - Uses card surface tokens for consistency */
.shopify-analytics-section {
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  margin-top: var(--space-lg);
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
  /* Smooth layout transitions when country panel appears/disappears */
  transition: all var(--duration-layout) var(--ease-default);
}

/* Blue strip removed - neutral card design */

/* Analytics Header - Apple/Linear Premium with Strict Spacing */
.analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.analytics-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.analytics-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.analytics-title svg {
  color: var(--astrovia-blue);
  padding: 8px;
  background: var(--info-bg);
  border: none;
  border-radius: var(--radius-md);
  width: 36px;
  height: 36px;
}

.analytics-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding-left: 48px;
}

.analytics-period-select {
  padding: 8px 32px 8px 12px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--bg-white);
  cursor: pointer;
  appearance: none;
  background-image: 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='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: all var(--duration-normal);
}

.analytics-period-select:hover {
  border-color: var(--astrovia-blue);
  background: var(--info-bg);
  box-shadow: 0 2px 6px var(--astrovia-blue-subtle);
}

.analytics-period-select:focus {
  outline: none;
  border-color: var(--astrovia-blue);
  box-shadow: var(--focus-ring);
}

/* KPI Summary Row - Primary focus area per dashboard hierarchy */
.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

@media (max-width: 900px) {
  .analytics-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .analytics-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* KPI Summary Cards - Primary visual focus per dashboard hierarchy */
.analytics-card {
  background: var(--card-surface);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition: all var(--duration-normal) var(--ease-default);
}

.analytics-card:hover {
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
  /* NO background change - Single-Surface Card Law */
}

.analytics-card-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

/* Primary KPI values - largest numbers, dominant visual element */
.analytics-card-value {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.analytics-countries-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-lighter);
}

.analytics-countries-header {
  margin-bottom: 18px;
}

.analytics-countries-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px 0;
}

.analytics-countries-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.analytics-countries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.analytics-country-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

/* Unified hover behavior - uses canonical tokens */
.analytics-country-card:hover {
  border-color: var(--card-interactive-hover-border);
  background: var(--card-interactive-hover-bg);
  box-shadow: var(--card-interactive-hover-shadow);
}

.analytics-country-card:focus-visible {
  outline: none;
  border-color: var(--card-interactive-hover-border);
  box-shadow: var(--focus-ring);
}

.analytics-country-card.active {
  border-color: var(--astrovia-blue);
  background: var(--info-bg);
  box-shadow: 0 4px 12px var(--info-bg);
}

.analytics-country-flag {
  font-size: var(--font-size-3xl);
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.analytics-country-info {
  flex: 1;
  min-width: 0;
}

.analytics-country-name {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.analytics-country-stats {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.analytics-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px;
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.country-tax-detail {
  margin-top: 20px;
  padding: 24px;
  background: var(--info-bg);
  border: none;
  border-radius: var(--radius-lg);
}

.country-tax-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.country-tax-detail-header h4 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.country-tax-close {
  background: var(--bg-white);
  border: 1px solid var(--border-lighter);
  padding: 8px;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: all var(--duration-normal);
}

.country-tax-close:hover {
  background: var(--bg-secondary);
  border-color: var(--border-light);
  color: var(--text-primary);
}

.country-tax-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 700px) {
  .country-tax-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.country-tax-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-white);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-lighter);
}

.country-tax-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.country-tax-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--astrovia-blue);
  letter-spacing: -0.01em;
}

.country-tax-notes {
  padding: 16px 18px;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-lighter);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============================================
   PREMIUM ANALYTICS DASHBOARD V2
   ============================================ */

/* Clean Utility Bar - Minimal Header */
.analytics-utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  padding: 0 4px;
}

.analytics-status-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-divider {
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  opacity: 0.5;
}

.analytics-filters-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Legacy support - keeping for any remaining references */
.analytics-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 20px;
}

.analytics-header-left {
  flex: 1;
  min-width: 0;
}

.analytics-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Analytics Title Row - Inline Layout */
.analytics-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.analytics-hero-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.025em;
}

.analytics-status-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.connection-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all var(--duration-normal);
}

.connection-status-pill.connected {
  background: var(--badge-success-bg);
  border: none;
  color: var(--badge-success-text);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: var(--badge-letter-spacing);
  text-transform: uppercase;
}

.connection-status-pill.syncing {
  background: var(--info-bg);
  border: none;
  color: var(--astrovia-blue);
}

.connection-status-pill.disconnected {
  background: rgba(239, 68, 68, 0.08);
  color: var(--error-dark);
}

.connection-status-pill.warning {
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning);
}

.connection-status-pill.test_data {
  background: var(--badge-success-bg);
  border: none;
  color: var(--badge-success-text);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: var(--badge-letter-spacing);
  text-transform: uppercase;
}

.connection-status-pill.test_data .status-dot {
  background: var(--success-500);
  box-shadow: none;
}

.connection-status-pill.demo_data {
  background: var(--badge-success-bg);
  border: none;
  color: var(--badge-success-text);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: var(--badge-letter-spacing);
  text-transform: uppercase;
}

.connection-status-pill.demo_data .status-dot {
  background: var(--success-500);
  box-shadow: none;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.connection-status-pill.connected .status-dot {
  background: var(--success-500);
  box-shadow: none;
}

.connection-status-pill.syncing .status-dot {
  background: var(--astrovia-blue);
  animation: pulse 1.5s infinite;
}

.connection-status-pill.disconnected .status-dot {
  background: var(--error);
  box-shadow: 0 0 5px rgba(239, 68, 68, 0.4);
}

.connection-status-pill.warning .status-dot {
  background: var(--warning);
  box-shadow: 0 0 5px rgba(245, 158, 11, 0.4);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.sync-timestamp {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.8;
}

.sync-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.sync-refresh-btn:hover {
  color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
}

.sync-refresh-btn.refreshing svg {
  animation: spin 1s linear infinite;
}

/* Empty State Styles */
.chart-empty-state,
.empty-countries-message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  font-weight: 500;
  text-align: center;
  padding: 24px;
  background: var(--bg-light);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-light);
}

.analytics-hero-subtitle {
  display: block;
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  padding-left: 42px;
}

/* ========================================
   FILTER SELECTS - UNIFIED CONTROLS
   All dashboard filters use consistent sizing
   ======================================== */
.analytics-currency-select,
.analytics-period-select-premium {
  height: var(--filter-height);
  padding: var(--filter-padding);
  border: 1px solid var(--filter-border);
  border-radius: var(--filter-radius);
  font-size: var(--filter-font-size);
  font-weight: var(--filter-font-weight);
  color: var(--filter-text);
  background: var(--filter-bg);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: all var(--duration-fast) var(--ease-default);
  white-space: nowrap;
  min-width: 80px;
  line-height: 1.5;
}

.analytics-currency-select:hover,
.analytics-period-select-premium:hover {
  border-color: var(--filter-hover-border);
  color: var(--filter-hover-text);
  background-color: var(--filter-hover-bg);
}

.analytics-currency-select:focus,
.analytics-period-select-premium:focus {
  outline: none;
  border-color: var(--filter-hover-border);
  box-shadow: var(--focus-ring);
}

/* Metrics Rows - Strict 12-column Grid with Unified Spacing */
.analytics-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.analytics-secondary-row {
  margin-bottom: 24px;
}

/* ========================================
   SALES BREAKDOWN - Collapsible Panel
   ======================================== */

.sales-breakdown-section {
  margin-bottom: 28px;
}

.sales-breakdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  height: var(--filter-height);
  padding: 6px 12px;
  background: var(--filter-bg);
  border: 1px solid var(--filter-border);
  border-radius: var(--filter-radius);
  font-size: var(--filter-font-size);
  font-weight: var(--filter-font-weight);
  color: var(--filter-text);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  font-family: inherit;
}

.sales-breakdown-toggle:hover {
  background: var(--info-bg);
  border-color: var(--astrovia-blue);
  box-shadow: 0 2px 6px var(--astrovia-blue-subtle);
}

.sales-breakdown-toggle:hover .sales-breakdown-toggle-text,
.sales-breakdown-toggle:hover .sales-breakdown-chevron {
  color: var(--astrovia-blue);
  stroke: var(--astrovia-blue);
}

.sales-breakdown-toggle-text {
  font-size: var(--filter-font-size);
  font-weight: var(--filter-font-weight);
  color: var(--text-secondary);
  transition: color var(--duration-normal) var(--ease-default);
}

.sales-breakdown-toggle-icon {
  display: none;
}

.sales-breakdown-chevron {
  width: var(--filter-chevron-size);
  height: var(--filter-chevron-size);
  stroke: var(--text-tertiary);
  transition: transform var(--duration-normal) var(--ease-default), stroke var(--duration-normal) var(--ease-default);
}

.sales-breakdown-section.expanded .sales-breakdown-chevron {
  transform: rotate(180deg);
}

.sales-breakdown-section.expanded .sales-breakdown-toggle {
  margin-bottom: 16px;
}

.sales-breakdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-layout) var(--ease-default), 
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--bg-white);
  border: 1px solid var(--border-lighter);
  border-radius: var(--radius-lg);
  opacity: 0;
  box-shadow: var(--shadow-sm);
}

.sales-breakdown-section.expanded .sales-breakdown-content {
  max-height: 800px;
  padding: 28px 32px 40px;
  opacity: 1;
}

.sales-breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
}

.breakdown-column {
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}

.breakdown-column:first-child {
  padding-left: 0;
}

.breakdown-column:last-child {
  padding-right: 0;
}

.breakdown-separator {
  background: var(--border-lighter);
  margin: 0 8px;
}

.breakdown-column-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-lighter);
}

.breakdown-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease-default);
}

.breakdown-item {
  margin: 0 -8px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-default);
}

.breakdown-item:hover {
  background: var(--bg-subtle);
}

.breakdown-item-label {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-secondary);
}

.breakdown-item-value {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.breakdown-item-value.negative {
  color: var(--error-dark);
}

.breakdown-item-value.highlight {
  color: var(--astrovia-blue);
  font-weight: 700;
}

.breakdown-item-value.total {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.breakdown-item-highlight {
  background: var(--info-bg);
  margin: 0 -12px;
  padding: 12px !important;
  border-radius: var(--radius-md);
  border: none;
  transition: background var(--duration-fast) var(--ease-default);
}

.breakdown-item-highlight:hover {
  background: var(--astrovia-blue-light-bg);
}

.breakdown-item-total {
  background: linear-gradient(135deg, var(--bg-surface-subtle) 0%, var(--bg-surface) 100%);
  margin: 8px -12px 0;
  padding: 14px 12px !important;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-lighter);
}

.breakdown-item-total:hover {
  background: linear-gradient(135deg, var(--neutral-100) 0%, var(--bg-section) 100%);
}

.breakdown-divider {
  height: 1px;
  background: var(--border-lighter);
  margin: 8px 0;
}

.breakdown-add-row {
  position: relative;
  padding-left: 20px;
}

.breakdown-add-row::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--text-tertiary);
  font-weight: 600;
  font-size: var(--font-size-base);
}

@media (max-width: 768px) {
  .sales-breakdown-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  
  .breakdown-separator {
    display: none;
  }
  
  .breakdown-column {
    padding: 0;
  }
  
  .sales-breakdown-section.expanded .sales-breakdown-content {
    padding: 24px 20px 36px;
    max-height: 1000px;
  }
}

/* ========================================
   SHOPIFY-STYLE BREAKDOWN CARDS
   Clean rows with label left, value right
   ======================================== */

.breakdown-card {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  overflow: visible;
}

.breakdown-card:last-child {
  margin-bottom: 0;
  padding-bottom: 8px;
}

.breakdown-card-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-lighter);
}

.breakdown-rows {
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 4px solid transparent;
  padding: 12px 16px 12px 12px;
  border-top: 1px solid var(--border-lighter);
  transition: background var(--duration-fast) var(--ease-default);
}

.breakdown-row:first-child {
  border-top: none;
}

/* Alternating row backgrounds - Shopify style */
.breakdown-row:nth-child(even) {
  background: var(--bg-surface-subtle);
}

.breakdown-row:hover {
  background: var(--bg-subtle);
}

.breakdown-row-label {
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--astrovia-blue);
}

.breakdown-row-value {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.breakdown-row-value.negative {
  color: var(--error-dark);
}

.breakdown-row-value.highlight {
  color: var(--astrovia-blue);
}

.breakdown-row-value.total {
  font-size: var(--font-size-base);
}

.breakdown-row-indent {
  padding-left: 28px;
}

.breakdown-row-indent .breakdown-row-label {
  color: var(--text-secondary);
  font-weight: 400;
}

.breakdown-row-highlight {
  background: var(--info-bg);
  border-left: 4px solid var(--astrovia-blue);
  border-top: 1px solid var(--border-lighter);
  border-bottom: 1px solid var(--border-lighter);
  margin: 0;
  padding: 12px 16px 12px 12px;
}

.breakdown-row-highlight:hover {
  background: var(--astrovia-blue-light-bg);
}

.breakdown-row-add {
  position: relative;
  padding-left: 24px;
  border-top: 1px solid var(--border-lighter);
}

.breakdown-row-add::before {
  content: '+';
  position: absolute;
  left: 12px;
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: var(--font-size-base);
}

.breakdown-row-add .breakdown-row-label {
  color: var(--text-secondary);
  font-weight: 400;
}

.breakdown-row-total {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-lighter);
  margin: 0;
  padding: 12px 16px 12px 12px;
  border-left: 4px solid transparent;
}

.breakdown-row-total:hover {
  background: var(--bg-tertiary);
}

.breakdown-row-total .breakdown-row-label {
  font-weight: 600;
  color: var(--text-primary);
}

/* ========================================
   COUNTRY FILTER - Multi-select Dropdown
   ======================================== */

.country-filter-container {
  position: relative;
}

.country-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--filter-height);
  padding: 6px 12px;
  background: var(--filter-bg);
  border: 1px solid var(--filter-border);
  border-radius: var(--filter-radius);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--filter-font-size);
  font-weight: var(--filter-font-weight);
  color: var(--filter-text);
  transition: all var(--duration-fast) var(--ease-default);
  white-space: nowrap;
}

.country-filter-btn:hover {
  border-color: var(--filter-hover-border);
  color: var(--astrovia-blue);
  background-color: var(--info-bg);
  box-shadow: 0 2px 6px var(--astrovia-blue-subtle);
}

.country-filter-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.country-filter-btn svg.filter-chevron {
  width: var(--filter-chevron-size);
  height: var(--filter-chevron-size);
  transition: transform var(--duration-normal) var(--ease-default);
}

.country-filter-container.open .country-filter-btn svg.filter-chevron {
  transform: rotate(180deg);
}

.country-filter-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 320px;
  background: var(--bg-white);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--duration-normal) var(--ease-default);
  z-index: 1000;
  max-height: 420px;
  display: flex;
  flex-direction: column;
}

.country-filter-container.open .country-filter-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.country-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-lighter);
}

.country-filter-header span {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.country-filter-clear {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--astrovia-blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: background var(--duration-fast) var(--ease-default);
}

.country-filter-clear:hover {
  background: var(--info-bg);
}

.country-filter-search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-lighter);
}

.country-filter-search input {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-family: inherit;
  transition: border-color var(--duration-normal) var(--ease-default);
}

.country-filter-search input:focus {
  outline: none;
  border-color: var(--astrovia-blue);
}

.country-filter-search input::placeholder {
  color: var(--text-tertiary);
}

.country-filter-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  max-height: 240px;
}

.country-filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}

.country-filter-item:hover {
  background: var(--bg-subtle);
}

.country-filter-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  accent-color: var(--astrovia-blue);
}

.country-filter-item-flag {
  font-size: var(--font-size-xl);
}

.country-filter-item-name {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
}

.country-filter-item-count {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  padding: 2px 8px;
  border-radius: var(--radius-md);
}

.country-filter-loading {
  padding: 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}

.country-filter-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-lighter);
}

.country-filter-select-all {
  flex: 1;
  padding: 10px 16px;
  background: var(--bg-white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.country-filter-select-all:hover {
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
}

.country-filter-apply {
  flex: 1;
  padding: 10px 16px;
  background: var(--astrovia-blue);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-on-brand);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}

.country-filter-apply:hover {
  background: var(--astrovia-blue-hover);
}

.country-filter-active {
  background: var(--info-bg);
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
}

@media (max-width: 640px) {
  .country-filter-dropdown {
    width: 280px;
    right: -40px;
  }
}

@media (max-width: 900px) {
  .analytics-metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .analytics-metrics-row {
    grid-template-columns: 1fr;
  }
}

/* Metric Cards - Neutral Surface with Astrovia Blue Accents Only */
/* Analytics Metric Cards - Apple/Linear Premium Level with Strict Spacing */
/* ========================================
   ANALYTICS METRIC CARDS - INTERACTIVE KPI CARDS
   Uses canonical .c-card--interactive hover behavior
   ======================================== */
.analytics-metric-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  min-height: 88px;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

/* Unified hover behavior - matches country cards exactly */
.analytics-metric-card:hover {
  border-color: var(--card-interactive-hover-border);
  background: var(--card-interactive-hover-bg);
  box-shadow: var(--card-interactive-hover-shadow);
}

.analytics-metric-card:focus-visible {
  outline: none;
  border-color: var(--card-interactive-hover-border);
  box-shadow: var(--focus-ring);
}

/* Icons are SECONDARY - no pill, no background, Astrovia Blue muted */
.analytics-metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--icon-muted);
  flex-shrink: 0;
}

.analytics-metric-icon svg,
.analytics-metric-icon i {
  width: 20px;
  height: 20px;
  font-size: var(--font-size-2xl);
}

.analytics-metric-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Labels are quiet, consistent, never dominant */
.analytics-metric-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* Numbers are VISUALLY DOMINANT */
.analytics-metric-value {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

/* ========================================
   DESIGN SYSTEM METRIC CARDS
   Standardized cards for CIE, Nexus, and all dashboards
   Uses neutral surface with subtle state tints - NOT loud gradients
   ======================================== */
.ds-metric-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  transition: all var(--duration-normal) var(--ease-default);
  min-height: 90px;
}

.ds-metric-card:hover {
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}

/* Icons - NO background unless interactive control */
.ds-metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--icon-muted);
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-default);
}

.ds-metric-card:hover .ds-metric-icon {
  background: transparent;
  border-color: transparent;
}

.ds-metric-icon svg {
  width: 20px;
  height: 20px;
}

.ds-metric-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.ds-metric-value {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ds-metric-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* State Variants - Subtle tints, NOT loud gradient blocks */
.ds-metric-card--error {
  border-left: 3px solid var(--error);
}

.ds-metric-card--error .ds-metric-icon {
  background: transparent;
  border: none;
  color: var(--error);
}

.ds-metric-card--error .ds-metric-value {
  color: var(--error-dark);
}

.ds-metric-card--warning {
  border-left: 3px solid var(--warning);
}

.ds-metric-card--warning .ds-metric-icon {
  background: transparent;
  border: none;
  color: var(--warning);
}

.ds-metric-card--warning .ds-metric-value {
  color: var(--warning-text);
}

.ds-metric-card--success {
  border-left: 3px solid var(--success);
}

.ds-metric-card--success .ds-metric-icon {
  background: transparent;
  border: none;
  color: var(--success);
}

.ds-metric-card--success .ds-metric-value {
  color: var(--success);
}

.ds-metric-card--neutral {
  border-left: 3px solid var(--neutral-border-strong);
}

.ds-metric-card--neutral .ds-metric-icon {
  background: transparent;
  border-color: transparent;
  color: var(--icon-muted);
}

/* Metric Grid Layout */
.ds-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-2xl), 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

/* ========================================
   DESIGN SYSTEM ACCORDION
   Unified expandable list pattern - Apple-style disclosure
   Use for Organizations, Integrations, and any expandable lists
   ======================================== */

/* Container list */
.ds-accordion-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Accordion item wrapper */
.ds-accordion {
  background: var(--bg-white);
  border-radius: var(--radius-accordion);
  overflow: visible;
  transition: box-shadow var(--duration-normal) var(--ease-default), 
              background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
}

.ds-accordion:hover {
  background: var(--bg-secondary);
}

.ds-accordion.ds-accordion--expanded {
  background: var(--bg-white);
  box-shadow: var(--shadow-card);
}

/* Accordion header - clickable row */
.ds-accordion-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
  border-radius: var(--radius-accordion);
  user-select: none;
}

.ds-accordion-header:hover {
  background: rgba(0, 0, 0, 0.02);
}

.ds-accordion-header:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--astrovia-blue);
}

/* Chevron - Apple-style disclosure triangle */
.ds-accordion-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-tertiary);
  transition: transform var(--duration-normal) var(--ease-default);
  flex-shrink: 0;
}

.ds-accordion-chevron svg {
  width: 16px;
  height: 16px;
}

.ds-accordion.ds-accordion--expanded .ds-accordion-chevron {
  transform: rotate(90deg);
  color: var(--astrovia-blue);
}

/* Avatar/icon area */
.ds-accordion-avatar {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.ds-accordion-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* Main content area - grows to fill space */
.ds-accordion-content {
  flex: 1;
  min-width: 0;
}

.ds-accordion-title {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  line-height: 1.3;
}

.ds-accordion-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Meta info area (right side) */
.ds-accordion-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

/* Badge for counts/status */
.ds-accordion-badge {
  padding: 4px 10px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: var(--radius-full);
  background: var(--info-bg);
  color: var(--astrovia-blue);
}

.ds-accordion-badge--muted {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}

/* Expandable body with height animation */
.ds-accordion-body {
  max-height: 0;
  overflow: hidden;
  background: var(--bg-secondary);
  border-top: 0 solid var(--border-light);
  transition: max-height var(--duration-slow) var(--ease-default),
              border-top-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ds-accordion.ds-accordion--expanded .ds-accordion-body {
  max-height: 2000px;
  border-top-width: 1px;
}

.ds-accordion-body-inner {
  padding: var(--space-lg);
  animation: dsAccordionFadeIn 0.3s ease-out;
}

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

/* Skeleton loader for async content */
.ds-accordion-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ds-accordion-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-white);
  border-radius: var(--radius-md);
}

.ds-accordion-skeleton-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--border-light) 25%, var(--bg-tertiary) 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: dsSkeletonShimmer 1.5s ease-in-out infinite;
}

.ds-accordion-skeleton-text {
  height: 12px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--border-light) 25%, var(--bg-tertiary) 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: dsSkeletonShimmer 1.5s ease-in-out infinite;
}

.ds-accordion-skeleton-text--name {
  width: 120px;
  height: 14px;
  margin-bottom: 4px;
}

.ds-accordion-skeleton-text--detail {
  width: 160px;
}

.ds-accordion-skeleton-text--badge {
  width: 50px;
  margin-left: auto;
}

@keyframes dsSkeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Item rows inside accordion body */
.ds-accordion-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-white);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-default);
}

.ds-accordion-item:hover {
  background: var(--bg-tertiary);
}

.ds-accordion-item-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.ds-accordion-item-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.ds-accordion-item-content {
  flex: 1;
  min-width: 0;
}

.ds-accordion-item-name {
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.ds-accordion-item-detail {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.ds-accordion-item-badge {
  padding: 3px 8px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.ds-accordion-item-badge--admin {
  background: var(--info-bg);
  color: var(--astrovia-blue);
}

.ds-accordion-item-badge--owner {
  background: var(--info-bg);
  color: var(--astrovia-blue);
}

/* Actions area in accordion body */
.ds-accordion-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}

/* Accordion body section styling */
.ds-accordion-section {
  margin-bottom: var(--space-md);
}

.ds-accordion-section--bordered {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
}

.ds-accordion-section-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-primary);
}

.ds-accordion-section-title svg {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
}

.ds-accordion-section-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  line-height: 1.5;
}

.ds-accordion-section-hint {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

/* Form row inside accordion */
.ds-accordion-form-row {
  display: flex;
  gap: var(--space-sm);
}

.ds-accordion-form-row .form-input {
  flex: 1;
}

@media (max-width: 768px) {
  .ds-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ds-metric-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   PAGE HEADER ICON PILL
   Unified icon container for page titles (CIE, Nexus, etc.)
   ======================================== */
.ds-page-icon {
  width: var(--space-3xl);
  height: var(--space-3xl);
  background: var(--info-bg);
  border: none;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--astrovia-blue);
  flex-shrink: 0;
}

.ds-page-icon svg {
  width: var(--space-xl);
  height: var(--space-xl);
}

/* ========================================
   CIE/NEXUS STATS ROW
   Standardized stats display within cards
   ======================================== */
.ds-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-md);
  padding-top: var(--space-lg);
  margin-top: var(--space-lg);
  border-top: 1px solid var(--border-light);
}

.ds-stat-item {
  text-align: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.ds-stat-value {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--astrovia-blue);
  line-height: 1.2;
}

.ds-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

/* ========================================
   PENDING BADGE
   Unified badge for pending counts
   ======================================== */
.ds-pending-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  background: var(--neutral-400);
  color: var(--text-on-brand);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  min-width: var(--space-lg);
  transition: background-color var(--duration-normal) var(--ease-default), opacity var(--duration-normal) var(--ease-default);
}

/* Loading/skeleton state - hidden until data loads (no flash) */
.ds-pending-badge.loading,
.ds-pending-badge[data-loading="true"] {
  background: var(--neutral-300);
  color: transparent;
  opacity: 0;
  pointer-events: none;
}

/* Active state with count > 0 shows attention color (amber, not red) */
.ds-pending-badge.active,
.ds-pending-badge[data-count]:not([data-count="0"]):not(.loading) {
  background: var(--status-warning);
  opacity: 1;
}

.ds-pending-badge:empty,
.ds-pending-badge[data-count="0"]:not(.loading) {
  display: none;
}

/* ========================================
   METRIC STRIP
   Compact horizontal metrics row for CIE/Nexus
   Used instead of tall stacked cards
   ======================================== */
.metric-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  margin-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}

.metric-strip-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: var(--col-min-sm);
}

.metric-strip-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.metric-strip-value.accent {
  color: var(--astrovia-blue);
}

.metric-strip-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 640px) {
  .metric-strip {
    gap: var(--space-md);
  }
  .metric-strip-item {
    min-width: var(--col-min-xs);
    flex: 1 1 calc(50% - var(--space-md));
  }
}

/* ========================================
   METRIC STAT CARDS
   Used for CIE sync stats and similar grid layouts
   ======================================== */
.metric-stat-card {
  text-align: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  flex: 1;
  min-width: var(--col-min-sm);
}

.metric-stat-value {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.metric-stat-value.accent {
  color: var(--astrovia-blue);
}

.metric-stat-value.accent-purple {
  color: var(--astrovia-purple);
}

.metric-stat-value.accent-warning {
  color: var(--warning);
}

.metric-stat-value.accent-success {
  color: var(--success);
}

.metric-stat-value.accent-info {
  color: var(--info-text);
}

.metric-stat-value.text-sm {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.metric-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

@media (max-width: 640px) {
  .metric-stat-card {
    flex: 1 1 calc(50% - var(--space-md));
    min-width: var(--col-min-xs);
  }
}

/* ========================================
   FILTER GRID
   Consistent filter bar layout for CIE/Nexus
   Ensures labels never truncate
   ======================================== */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-xl), 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.filter-grid-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.filter-grid-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.filter-grid-input,
.filter-grid-select {
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--bg-white);
  color: var(--text-primary);
  width: 100%;
  transition: all var(--duration-fast) var(--ease-default);
}

.filter-grid-input:hover,
.filter-grid-select:hover {
  border-color: var(--border-dark);
}

.filter-grid-input:focus,
.filter-grid-select:focus {
  outline: none;
  border-color: var(--astrovia-blue);
  box-shadow: var(--focus-ring-input);
}

.filter-grid-actions {
  display: flex;
  align-items: flex-end;
}

/* 4-column layout for CIE filters */
.filter-grid-4 {
  grid-template-columns: 1fr 1fr 1fr auto;
}

@media (max-width: 900px) {
  .filter-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .filter-grid-actions {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .filter-grid,
  .filter-grid-4 {
    grid-template-columns: 1fr;
  }
  .filter-grid-actions {
    grid-column: span 1;
  }
}

/* ========================================
   SEARCH BAR PATTERN
   Apple-style search input with icon
   ======================================== */
.search-bar-wrapper {
  position: relative;
}

.search-bar-icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.search-bar-input {
  width: 100%;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-3xl);
  font-size: var(--font-size-md);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--bg-white);
  color: var(--text-primary);
  outline: none;
  transition: all var(--duration-fast) var(--ease-default);
  box-shadow: 0 1px 2px var(--hover-overlay);
}

.search-bar-input:focus {
  border-color: var(--astrovia-blue);
  box-shadow: var(--focus-ring-input);
}

.search-bar-input::placeholder {
  color: var(--text-tertiary);
}

/* CIE Info Panel Trigger */
.cie-info-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-lg) var(--space-xl);
  background: var(--card-surface);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-info-trigger:hover {
  background: var(--bg-secondary);
}

.cie-info-trigger .info-icon {
  width: 40px;
  height: 40px;
  background: var(--info-bg);
  border: none;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--astrovia-blue);
}

.cie-info-trigger .info-icon i {
  font-size: var(--font-size-2xl);
}

/* CIE Section Spacing */
.cie-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.cie-section > .c-card {
  margin-bottom: 0;
}

/* CIE Material Analysis Card */
.cie-material-card {
  padding: var(--space-xl);
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-lg);
}

.cie-material-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.cie-material-icon {
  width: 40px;
  height: 40px;
  background: var(--info-bg);
  border: none;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--astrovia-blue);
}

.cie-material-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .cie-material-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cie-material-item {
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  text-align: center;
}

.cie-material-value {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.cie-material-label {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* CIE Official Results Table */
.cie-results-table {
  width: 100%;
  border-collapse: collapse;
}

.cie-results-table th,
.cie-results-table td {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.cie-results-table th {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--bg-secondary);
}

.cie-results-table tr:hover td {
  background: var(--bg-secondary);
}

.cie-results-table .code-cell {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.cie-results-table .desc-cell {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 500px;
}

/* CIE HS Code Badges */
.hs-code-badge {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--astrovia-blue);
  background: var(--info-bg);
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  letter-spacing: 0.02em;
}

.hs-code-badge-secondary {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 4px 10px;
  border-radius: var(--radius-md);
}

/* CIE Results Table Cell Classes */
.cie-results-table-row {
  border-bottom: 1px solid var(--border-light);
  transition: background var(--duration-fast) var(--ease-default);
}

.cie-results-table-row:hover {
  background: var(--bg-secondary);
}

.cie-results-table-cell {
  padding: 12px 16px;
  font-size: var(--font-size-base);
  vertical-align: middle;
}

.cie-results-table-cell.text-ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cie-results-table-cell.text-right {
  text-align: right;
}

.cie-results-table-cell.text-secondary {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cie-results-table-cell.text-tertiary {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.cie-results-table-cell.font-mono {
  font-family: var(--font-mono);
}

.cie-results-table-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-tertiary);
}

.cie-results-table-empty.text-error {
  color: var(--error);
}

.hs-code-hs6 {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  padding: 2px 6px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.hs-region-label {
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: 0.03em;
  color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.hs-duty-pill {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--success);
  background: var(--success-bg);
  border: none;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

/* CIE Suggestion Cards */
.hs-suggestion-card {
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.hs-suggestion-card:hover {
  border-color: var(--border-medium);
  box-shadow: 0 2px 8px var(--hover-overlay);
}

.hs-suggestion-card:last-child {
  margin-bottom: 0;
}

/* CIE Official Results */
.hs-official-result {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  transition: all var(--duration-fast) var(--ease-default);
}

.hs-official-result:hover {
  background: var(--bg-secondary);
}

.hs-official-result:last-child {
  margin-bottom: 0;
}

.hs-code-mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-secondary);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  min-width: 140px;
}

.hs-result-description {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.hs-result-duty {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.hs-result-duty.free {
  color: var(--success);
  background: var(--success-bg);
}

/* ========================================
   CIE REDESIGN v2 - Apple/Stripe Level UI
   ========================================
   
   DESIGN SYSTEM COMPLIANCE NOTICE
   ================================
   This entire section is 100% token-driven.
   - All colors use Astrovia design tokens (--astrovia-blue, --text-*, --success, etc.)
   - All spacing uses --space-* tokens
   - All radii use --radius-* tokens
   - All shadows use --shadow-* or --card-shadow-* tokens
   - All transitions use Astrovia ease curves
   
   Motion Spec:
   - Tab switching: 0.25s opacity fade with cubic-bezier(0.4, 0, 0.2, 1)
   - Modal: backdrop 0.15s fade, content 0.25s slide-up
   - Confidence bar: 0.3s width animation
   - Skeleton: shimmer animation matching Markets/Nexus patterns
   ======================================== */

/* CIE Skeleton Loaders */
.cie-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 25%,
    var(--bg-tertiary) 50%,
    var(--bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: cie-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.cie-skeleton-text {
  height: 16px;
  margin-bottom: var(--space-sm);
}

.cie-skeleton-text.short { width: 40%; }
.cie-skeleton-text.medium { width: 65%; }
.cie-skeleton-text.long { width: 90%; }

.cie-skeleton-code {
  height: 32px;
  width: 140px;
  margin-bottom: var(--space-md);
}

.cie-skeleton-badge {
  height: 24px;
  width: 60px;
  border-radius: var(--radius-full);
}

.cie-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

@keyframes cie-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cie-skeleton {
    animation: none;
    background: var(--bg-secondary);
  }
}

/* Spinning Animation */
.spinning {
  animation: spin 1s linear infinite;
}

/* CIE Error State */
.cie-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl);
  text-align: center;
}

.cie-confidence-icon.error {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.cie-confidence-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* CIE Duty Estimator CTA */
.cie-duty-cta,
.cie-duty-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--info-bg);
  border: 1px solid var(--astrovia-blue-border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-lg);
}

.cie-duty-cta-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.cie-duty-cta-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.cie-duty-cta-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.cie-duty-cta-subtitle {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* CIE Input Card - 2 Column Layout */
.cie-input-card {
  padding: var(--space-2xl);
}

.cie-input-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-2xl);
}

@media (max-width: 1024px) {
  .cie-input-grid {
    grid-template-columns: 1fr;
  }
}

.cie-input-left {
  display: flex;
  flex-direction: column;
}

.cie-input-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.cie-description-input {
  resize: vertical;
  min-height: 80px;
  font-size: var(--font-size-md);
  line-height: 1.5;
}

/* Material Detection */
.cie-material-detection {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.cie-material-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.cie-material-pill.detected {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-dark);
}

.cie-edit-link {
  background: none;
  border: none;
  color: var(--astrovia-blue);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 0;
}

.cie-edit-link:hover {
  text-decoration: underline;
}

/* CIE Form Rows */
.cie-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
}

.cie-input-actions {
  margin-top: auto;
  padding-top: var(--space-lg);
}

/* Confidence Panel */
.cie-confidence-panel {
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.cie-confidence-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.cie-confidence-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  text-align: center;
}

.cie-confidence-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-surface);
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  font-size: var(--font-size-3xl);
}

.cie-confidence-text {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.cie-confidence-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.cie-confidence-value {
  font-size: var(--font-size-4xl);
  font-weight: 700;
}

.cie-confidence-value.high { color: var(--success); }
.cie-confidence-value.medium { color: var(--warning-dark); }
.cie-confidence-value.low { color: var(--error); }

/* ========================================
   REDESIGNED CONFIDENCE MODULE
   Clean progress bar with High/Medium/Low labels
   Phase 4 CIE Overhaul
   ======================================== */

/* Container for the confidence display content */
.cie-confidence-display-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Main confidence score row */
.cie-conf-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Large percentage display */
.cie-conf-percentage {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cie-conf-percentage.high { color: var(--success-dark); }
.cie-conf-percentage.medium { color: var(--warning-dark); }
.cie-conf-percentage.low { color: var(--error); }

/* Level badge - High/Medium/Low */
.cie-conf-level-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: 0.04em;
}

.cie-conf-level-badge.high {
  background: var(--success-bg);
  color: var(--success-dark);
  border: none;
}

.cie-conf-level-badge.medium {
  background: var(--warning-bg);
  color: var(--warning-dark);
  border: none;
}

.cie-conf-level-badge.low {
  background: var(--error-bg);
  color: var(--error);
  border: none;
}

/* Progress bar container */
.cie-conf-bar-container {
  width: 100%;
}

.cie-conf-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.cie-conf-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s var(--ease-default);
}

.cie-conf-progress-fill.high { background: var(--success); }
.cie-conf-progress-fill.medium { background: var(--warning); }
.cie-conf-progress-fill.low { background: var(--error); }

/* Threshold markers under progress bar */
.cie-conf-thresholds {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.cie-conf-threshold-marker {
  position: relative;
}

.cie-conf-threshold-marker::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 4px;
  background: var(--neutral-300);
}

/* Action hint for low confidence */
.cie-conf-action-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-surface-muted);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.cie-conf-action-hint i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-tertiary);
}

/* View alternates link */
.cie-conf-alternates-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--astrovia-blue);
  text-decoration: none;
  margin-top: var(--space-xs);
}

.cie-conf-alternates-link:hover {
  text-decoration: underline;
}

/* Loading state for confidence */
.cie-confidence-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl);
  color: var(--text-tertiary);
}

.cie-confidence-loading .skeleton-bar {
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, var(--neutral-200) 25%, var(--neutral-100) 50%, var(--neutral-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-full);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Error state */
.cie-conf-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.cie-conf-error-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--error-bg);
  border-radius: var(--radius-full);
  color: var(--error);
  font-size: var(--font-size-3xl);
}

.cie-conf-error-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Legacy support - keep old classes working */
.cie-confidence-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
}

.cie-confidence-high {
  background: var(--status-success-bg);
  border-color: var(--status-success-border);
}

.cie-confidence-review {
  background: var(--status-warning-bg);
  border-color: var(--status-warning-border);
}

.cie-confidence-error {
  background: var(--status-error-bg);
  border-color: var(--status-error-border);
}

.cie-confidence-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  flex-shrink: 0;
}

.cie-confidence-icon-wrap.success {
  background: var(--success);
  color: var(--bg-white);
}

.cie-confidence-icon-wrap.warning {
  background: var(--warning-dark);
  color: var(--bg-white);
}

.cie-confidence-icon-wrap.error {
  background: var(--error);
  color: var(--bg-white);
}

.cie-confidence-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
}

.cie-confidence-pct {
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.cie-view-alternates-link {
  font-size: var(--font-size-sm);
  color: var(--astrovia-blue);
  text-decoration: none;
  margin-left: auto;
}

.cie-view-alternates-link:hover {
  text-decoration: underline;
}

.cie-low-confidence-disclaimer {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  line-height: 1.5;
}

/* Error State Styling */
.cie-error-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
}

.cie-error-icon {
  font-size: var(--font-size-4xl);
  color: var(--error);
  margin-bottom: var(--space-md);
}

/* Tips Panel */
.cie-tips-panel {
  background: var(--info-bg);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.cie-tips-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--astrovia-blue);
  margin: 0 0 var(--space-md) 0;
}

.cie-tips-list {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.cie-tips-list li {
  margin-bottom: var(--space-xs);
}

.cie-tips-list li:last-child {
  margin-bottom: 0;
}

/* Guidelines Link */
.cie-guidelines-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.cie-guidelines-link a {
  color: var(--astrovia-blue);
  text-decoration: none;
}

.cie-guidelines-link a:hover {
  text-decoration: underline;
}

/* Smart Parsed Attributes Panel */
.cie-parsed-panel {
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  transition: all var(--duration-normal) var(--ease-default);
}

.cie-parsed-panel.active {
  border-color: var(--astrovia-blue-border);
  box-shadow: var(--shadow-subtle);
}

.cie-parsed-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--astrovia-blue);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}

.cie-parse-confidence-badge {
  margin-left: auto;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.cie-parse-confidence-badge.high {
  background: var(--success-bg);
  color: var(--success);
}

.cie-parse-confidence-badge.medium {
  background: var(--warning-bg);
  color: var(--warning-dark);
}

.cie-parse-confidence-badge.low {
  background: var(--error-bg);
  color: var(--error);
}

.cie-parsed-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cie-parsed-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.cie-parsed-label {
  min-width: 90px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-top: 2px;
}

.cie-parsed-value {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.cie-parsed-value.empty {
  color: var(--text-tertiary);
  font-style: italic;
  font-weight: normal;
}

.cie-parsed-materials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.cie-material-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: var(--astrovia-purple-subtle);
  color: var(--astrovia-purple);
  border-radius: var(--radius-full);
  border: none;
}

.cie-material-tag .pct {
  font-size: var(--font-size-xs);
  opacity: 0.8;
}

.cie-parsed-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.cie-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

.cie-parsed-warnings {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--warning-bg);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--warning-dark);
}

.cie-parsed-warnings ul {
  margin: 0;
  padding-left: var(--space-md);
}

.cie-parsed-warnings li {
  margin-bottom: 2px;
}

/* Clarification Questions Panel */
.cie-clarify-panel {
  background: var(--info-bg);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.cie-clarify-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--astrovia-blue);
  margin-bottom: var(--space-sm);
}

.cie-clarify-boost {
  margin-left: auto;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: var(--success-bg);
  color: var(--success);
  border-radius: var(--radius-full);
}

.cie-clarify-intro {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.cie-clarify-questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cie-clarify-question {
  padding: var(--space-md);
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-md);
}

.cie-clarify-question-text {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.cie-clarify-question-context {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}

.cie-clarify-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.cie-clarify-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-clarify-option:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.cie-clarify-option.selected {
  background: var(--astrovia-blue);
  color: white;
  border-color: var(--astrovia-blue);
}

.cie-clarify-option .hs-impact {
  font-size: var(--font-size-xs);
  opacity: 0.7;
  font-weight: normal;
}

/* CIE Results Card */
.cie-results-card {
  padding: 0;
  overflow: hidden;
}

/* Results Tabs */
.cie-results-tabs-container {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
}

.cie-results-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-results-tab:hover {
  background: var(--card-surface);
  color: var(--text-primary);
}

.cie-results-tab.active {
  background: var(--card-surface);
  border-color: var(--border-medium);
  color: var(--astrovia-blue);
  box-shadow: var(--shadow-subtle);
}

.cie-results-tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-lg);
}

.cie-results-tab i {
  font-size: var(--font-size-lg);
}

/* Results Content */
.cie-results-content {
  padding: var(--space-xl);
  opacity: 1;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.cie-results-content.hidden {
  display: none;
  opacity: 0;
}

.cie-results-content.fade-out {
  opacity: 0;
}

/* Overview Grid */
.cie-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}

@media (max-width: 900px) {
  .cie-overview-grid {
    grid-template-columns: 1fr;
  }
}

.cie-section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-lg) 0;
}

/* Primary Code Display */
.cie-primary-code-display {
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.cie-code-row {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
}

.cie-code-row:last-child {
  border-bottom: none;
}

.cie-code-label {
  flex: 0 0 120px;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.cie-code-value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.cie-code-primary {
  font-size: var(--font-size-2xl);
  color: var(--astrovia-blue);
}

.cie-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-copy-btn:hover {
  background: var(--astrovia-blue);
  border-color: var(--astrovia-blue);
  color: var(--text-on-primary);
}

.cie-copy-btn:focus-visible {
  outline: 2px solid var(--astrovia-blue);
  outline-offset: 2px;
}

.cie-copy-btn.copied {
  background: var(--success);
  border-color: var(--success);
  color: var(--text-on-primary);
}

/* Confidence Badge Container */
.cie-confidence-badge-container {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.cie-confidence-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.cie-confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-confidence-badge.high {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.cie-confidence-badge.medium {
  background: rgba(251, 191, 36, 0.1);
  color: var(--status-warning);
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.cie-confidence-badge.low {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.cie-confidence-badge i {
  font-size: var(--font-size-base);
}

.cie-confidence-tooltip {
  display: inline-flex;
  align-items: center;
  color: var(--text-tertiary);
  cursor: help;
  margin-left: var(--space-xs);
}

.cie-confidence-tooltip:hover {
  color: var(--text-secondary);
}

/* Chain Summary */
.cie-chain-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.cie-chain-divider {
  color: var(--text-tertiary);
}

/* Data Sources */
.cie-data-sources {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* ========================
   RECOMMENDATION CARDS
   Top 3 HS code recommendations as styled cards
   ======================== */
.cie-recommendations-section {
  margin-bottom: var(--space-lg);
}

.cie-recommendation-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 1024px) {
  .cie-recommendation-cards {
    grid-template-columns: 1fr;
  }
}

.cie-decision-outcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2xl);
}

.cie-decision-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.cie-decision-status i {
  font-size: var(--font-size-xl);
}

.cie-decision-outcome[data-risk="low"] .cie-decision-status i {
  color: var(--text-secondary);
}

.cie-decision-outcome[data-risk="medium"] .cie-decision-status i {
  color: var(--text-tertiary);
}

.cie-decision-outcome[data-risk="high"] .cie-decision-status i {
  color: var(--text-tertiary);
}

.cie-decision-helper {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: 0;
  font-style: italic;
}

.cie-recommendations-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-3xl);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.cie-recommendations-empty i {
  font-size: var(--font-size-4xl);
  opacity: 0.5;
}

.cie-recommendation-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) var(--ease-default);
  cursor: pointer;
}

.cie-recommendation-card:hover {
  border-color: var(--astrovia-blue);
  box-shadow: var(--shadow-card-hover);
}

.cie-recommendation-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-lg);
  border-color: var(--astrovia-blue);
}

.cie-recommendation-card.cie-recommendation-primary {
  border-color: var(--astrovia-blue);
  background: linear-gradient(135deg, var(--astrovia-blue-subtle) 0%, var(--card-surface) 100%);
}

.cie-recommendation-card.cie-recommendation-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--astrovia-blue);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.cie-rec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.cie-rec-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-secondary);
}

.cie-recommendation-primary .cie-rec-rank {
  background: var(--astrovia-blue);
  color: white;
}

.cie-rec-confidence {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.cie-rec-confidence.high { color: var(--success); }
.cie-rec-confidence.medium { color: var(--warning); }
.cie-rec-confidence.low { color: var(--error); }

.cie-rec-hs-code {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.cie-recommendation-primary .cie-rec-hs-code {
  color: var(--astrovia-blue);
}

.cie-rec-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-md);
  flex: 1;
}

.cie-rec-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}

.cie-rec-material {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.cie-rec-use-btn {
  padding: var(--space-xs) var(--space-md);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-rec-use-btn:hover {
  background: var(--astrovia-blue);
  border-color: var(--astrovia-blue);
  color: white;
}

.cie-recommendation-primary .cie-rec-use-btn {
  background: var(--astrovia-blue);
  border-color: var(--astrovia-blue);
  color: white;
}

.cie-recommendation-primary .cie-rec-use-btn:hover {
  background: var(--astrovia-blue-hover);
}

/* ========================
   DUTY ESTIMATE PANEL
   Shows estimated duty rates by region
   ======================== */
.cie-duty-estimate-panel {
  margin-bottom: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-lg);
}

.cie-duty-estimate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

@media (max-width: 768px) {
  .cie-duty-estimate-grid {
    grid-template-columns: 1fr;
  }
}

.cie-duty-estimate-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-duty-estimate-card:hover {
  border-color: var(--astrovia-blue);
}

.cie-duty-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.cie-duty-flag .flag-emoji {
  font-size: var(--font-size-3xl);
  line-height: 1;
}

.cie-duty-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.cie-duty-region {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.cie-duty-rate {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
}

.cie-duty-note {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.cie-duty-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--info-bg);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.cie-duty-disclaimer i {
  color: var(--astrovia-blue);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ========================
   DUTY ESTIMATE V2 - Enhanced Scannable Cards
   ======================== */
.cie-duty-estimate-panel-v2 {
  margin-bottom: var(--space-xl);
}

.cie-duty-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.cie-duty-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.cie-duty-section-title i {
  color: var(--astrovia-blue);
}

.cie-duty-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

@media (max-width: 900px) {
  .cie-duty-grid-v2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .cie-duty-grid-v2 {
    grid-template-columns: 1fr;
  }
}

.cie-duty-card-v2 {
  display: flex;
  flex-direction: column;
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--duration-normal) var(--ease-default);
  position: relative;
  overflow: hidden;
}

.cie-duty-card-v2:hover {
  border-color: var(--astrovia-blue);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.cie-duty-card-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border-light);
  transition: background var(--duration-normal);
}

.cie-duty-card-v2[data-rate-level="low"]::before {
  background: var(--success-500);
}

.cie-duty-card-v2[data-rate-level="medium"]::before {
  background: var(--warning-500);
}

.cie-duty-card-v2[data-rate-level="high"]::before {
  background: var(--error-500);
}

.cie-duty-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.cie-duty-flag-v2 {
  font-size: var(--font-size-3xl);
  line-height: 1;
}

.cie-duty-region-v2 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.cie-duty-rate-display {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.cie-duty-rate-v2 {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.cie-duty-rate-v2.loading {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  width: 60px;
  height: 2rem;
  color: transparent;
}

.cie-duty-rate-unit {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  font-weight: 500;
}

.cie-duty-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}

.cie-duty-fta-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--success-bg);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--success-dark);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cie-duty-fta-badge i {
  font-size: var(--font-size-xs);
}

.cie-duty-source {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.cie-duty-source i {
  font-size: var(--font-size-xs);
}

.cie-duty-note-v2 {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

.cie-duty-disclaimer-v2 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
}

.cie-duty-disclaimer-v2 i {
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ========================
   UNDERSTANDING HS CODES - Minimal Accordion V2
   ======================== */
.cie-info-card-v2 {
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-lg);
}

.cie-info-trigger-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-lg);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast);
}

.cie-info-trigger-v2:hover {
  background: var(--bg-secondary);
}

.cie-info-trigger-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.cie-info-icon-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--astrovia-blue-light);
  border-radius: var(--radius-md);
  color: var(--astrovia-blue);
  flex-shrink: 0;
}

.cie-info-icon-v2 i {
  font-size: var(--font-size-xl);
}

.cie-info-title-v2 {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 2px 0;
}

.cie-info-subtitle-v2 {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: 0;
}

.cie-info-chevron-v2 {
  font-size: var(--font-size-xl);
  color: var(--text-tertiary);
  transition: transform var(--duration-normal) var(--ease-default);
}

.cie-info-trigger-v2[aria-expanded="true"] .cie-info-chevron-v2 {
  transform: rotate(180deg);
}

.cie-info-content-v2 {
  padding: 0 var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--border-light);
}

.cie-info-content-v2.hidden {
  display: none;
}

.cie-info-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  padding-top: var(--space-lg);
}

@media (max-width: 768px) {
  .cie-info-grid-v2 {
    grid-template-columns: 1fr;
  }
}

.cie-info-item-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cie-info-item-title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.cie-info-item-title i {
  font-size: var(--font-size-base);
  color: var(--astrovia-blue);
}

.cie-info-item-text {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.6;
}

.cie-info-sources-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cie-info-sources-list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.cie-info-sources-list li::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--astrovia-blue);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.cie-info-banner-v2 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--astrovia-blue-light);
  border: 1px solid var(--astrovia-blue-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.cie-info-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--card-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

.cie-info-banner-icon i {
  font-size: var(--font-size-lg);
  color: var(--astrovia-blue);
}

.cie-info-banner-text h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.cie-info-banner-text p {
  font-size: var(--font-size-xs);
  color: var(--astrovia-blue);
  line-height: 1.5;
  margin: 0;
}

.cie-info-warning-v2 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--warning-bg);
  border: none;
  border-radius: var(--radius-md);
  margin-top: var(--space-lg);
}

.cie-info-warning-v2 i {
  font-size: var(--font-size-lg);
  color: var(--warning-dark);
  flex-shrink: 0;
  margin-top: 1px;
}

.cie-info-warning-v2 p {
  font-size: var(--font-size-xs);
  color: var(--warning-dark);
  line-height: 1.5;
  margin: 0;
}

/* Tariff Sources UI */
.cie-sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.cie-sources-loading,
.cie-sources-empty,
.cie-sources-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  grid-column: 1 / -1;
}

.cie-sources-loading i,
.cie-sources-empty i,
.cie-sources-error i {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-md);
}

.cie-source-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-default);
}

.cie-source-card:hover {
  border-color: var(--astrovia-blue);
  box-shadow: var(--shadow-card-hover);
}

.cie-source-card--healthy {
  border-left: 3px solid var(--success-500);
}

.cie-source-card--stale {
  border-left: 3px solid var(--warning-500);
}

.cie-source-card--unverified {
  border-left: 3px solid var(--text-tertiary);
  opacity: 0.85;
}

.cie-source-card--no-data {
  border-left: 3px solid var(--border-light);
  opacity: 0.7;
}

.cie-source-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
}

.cie-source-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.cie-source-regions {
  font-size: var(--font-size-2xl);
}

.cie-source-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.cie-source-stat {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.cie-source-stat-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2xs);
}

.cie-source-stat-value {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.cie-source-status--active {
  color: var(--success-600);
}

.cie-source-status--unverified {
  color: var(--text-tertiary);
}

.cie-source-status--deprecated {
  color: var(--error-500);
}

.cie-source-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-light);
}

.cie-source-sync-info {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.cie-source-risk-badge {
  display: inline-flex;
  padding: 2px 6px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--warning-100);
  color: var(--warning-700);
  border-radius: var(--radius-sm);
}

/* Review Queue - Linear-like UX */
.cie-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  box-shadow: var(--shadow-card);
}

.cie-review-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.cie-review-queue-stats {
  display: flex;
  gap: var(--space-lg);
}

.cie-review-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  min-width: 80px;
}

.cie-review-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
}

.cie-review-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cie-review-stat--success .cie-review-stat-value {
  color: var(--success-600);
}

.cie-review-stat--sla .cie-review-stat-value {
  color: var(--astrovia-blue);
}

.cie-review-queue-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cie-review-queue-card {
  position: relative;
}

.cie-review-queue-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 600px;
  overflow-y: auto;
}

.cie-review-queue-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-tertiary);
}

.cie-review-queue-empty i {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-md);
}

.cie-review-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-review-item:hover {
  background: var(--bg-secondary);
}

.cie-review-item--selected {
  background: var(--info-bg);
  border-left: 3px solid var(--astrovia-blue);
}

.cie-review-item:last-child {
  border-bottom: none;
}

.cie-review-item:focus {
  outline: none;
  background: var(--bg-secondary);
}

.cie-review-item-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.cie-review-item-sku {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cie-review-sku {
  font-weight: 600;
  color: var(--text-primary);
}

.cie-warning-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--font-size-xs);
  color: var(--warning-text);
}

.cie-review-item-code {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cie-review-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cie-confidence-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.cie-confidence--high {
  background: var(--success-100);
  color: var(--success-700);
}

.cie-confidence--medium {
  background: var(--warning-100);
  color: var(--warning-700);
}

.cie-confidence--low {
  background: var(--error-100);
  color: var(--error-700);
}

.cie-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cie-status--pending {
  background: var(--warning-100);
  color: var(--warning-700);
}

.cie-status--suggested {
  background: var(--info-bg);
  color: var(--astrovia-blue);
}

.cie-status--locked {
  background: var(--error-100);
  color: var(--error-700);
}

.cie-status--confirmed {
  background: var(--success-100);
  color: var(--success-700);
}

.cie-quality-badge {
  display: inline-flex;
  padding: 2px 6px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-transform: capitalize;
}

.cie-quality--exact {
  background: var(--success-100);
  color: var(--success-700);
}

.cie-quality--indicative {
  background: var(--warning-100);
  color: var(--warning-700);
}

.cie-detail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-light);
  box-shadow: -4px 0 24px rgba(16, 24, 40, 0.06);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-default);
}

.cie-detail-drawer.hidden {
  transform: translateX(100%);
}

.cie-detail-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
}

.cie-detail-drawer-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.cie-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  transition: all var(--duration-fast);
}

.cie-drawer-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.cie-detail-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.cie-detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cie-detail-section h4 {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.cie-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-light);
}

.cie-detail-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.cie-detail-value {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.cie-impact-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.cie-impact-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.cie-impact-row i {
  color: var(--text-tertiary);
}

.cie-detail-warnings {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cie-warning-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--warning-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--warning-700);
}

.cie-warning-item i {
  flex-shrink: 0;
  margin-top: 2px;
}

.cie-detail-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-light);
}

.cie-detail-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.c-btn-success {
  background: var(--success-500);
  color: white;
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.c-btn-success:hover:not(:disabled) {
  background: var(--success-600);
}

.c-btn-success:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.c-btn-warning {
  background: var(--warning-500);
  color: white;
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.c-btn-warning:hover:not(:disabled) {
  background: var(--warning-icon);
}

.c-btn-warning:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Alternates Preview */
.cie-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

.cie-alternates-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 400px;
  overflow-y: auto;
}

.cie-alternates-empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.cie-alternate-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-alternate-item:hover {
  border-color: var(--astrovia-blue);
}

.cie-alternate-code {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.cie-alternate-desc {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cie-confidence-bar {
  width: 60px;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.cie-confidence-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s var(--ease-default);
}

.cie-confidence-bar-fill.high { background: var(--success); }
.cie-confidence-bar-fill.medium { background: var(--warning); }
.cie-confidence-bar-fill.low { background: var(--error); }

.cie-compare-btn {
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-compare-btn:hover {
  background: var(--astrovia-blue);
  border-color: var(--astrovia-blue);
  color: var(--text-on-primary);
}

.cie-compare-btn:focus-visible {
  outline: 2px solid var(--astrovia-blue);
  outline-offset: 2px;
}

/* ========================
   PHASE 1: HS CODE TYPOGRAPHY + FORMATTING
   ======================== */

/* Code font stack for all HS codes */
.cie-hs-mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

/* Primary HS code - slightly larger, blue tint */
.cie-hs-mono.cie-hs-primary {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--astrovia-blue);
}

/* Format HS codes with visual separators */
.cie-hs-formatted {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.cie-hs-formatted .cie-hs-segment {
  display: inline;
}

.cie-hs-formatted .cie-hs-separator {
  color: var(--text-tertiary);
  margin: 0 1px;
  font-weight: 400;
}

/* ========================
   PHASE 2: ALTERNATE CLASSIFICATIONS INTERACTION
   ======================== */

/* Intent-aware alternates grouping */
.cie-alternates-group {
  margin-bottom: var(--space-xl);
}

.cie-alternates-group:last-child {
  margin-bottom: 0;
}

.cie-alternates-group-header {
  margin-bottom: var(--space-md);
}

.cie-alternates-group-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.cie-alternates-group-desc {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: 0;
  font-style: italic;
}

.cie-alternates-group-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cie-alternate-use-case {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  margin-top: var(--space-xs);
}

.cie-duty-note {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  padding: 2px 6px;
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  margin-left: auto;
}

/* Clickable alternate cards */
.cie-alternate-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-alternate-item:hover {
  border-color: var(--astrovia-blue);
  background: var(--bg-secondary);
}

.cie-alternate-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-lg);
  border-color: var(--astrovia-blue);
}

/* Selected alternate state */
.cie-alternate-item.cie-alternate-selected {
  border-color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
  box-shadow: 0 0 0 1px var(--astrovia-blue);
}

.cie-alternate-item.cie-alternate-selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--astrovia-blue);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Three-line structure for alternates */
.cie-alternate-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cie-alternate-hs-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cie-alternate-code {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.cie-alternate-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cie-alternate-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.cie-alternate-material {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* ========================
   PHASE 3: CONFIDENCE PILL (NOT MATERIAL %)
   ======================== */

/* Confidence pill with label */
.cie-confidence-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.cie-confidence-pill .cie-confidence-label {
  font-weight: 500;
  opacity: 0.8;
}

/* Semantic colors for confidence */
.cie-confidence-pill.cie-confidence-high {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.cie-confidence-pill.cie-confidence-medium {
  background: rgba(251, 191, 36, 0.1);
  color: var(--warning);
}

.cie-confidence-pill.cie-confidence-low {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* Material/Garment/Construction notes strip */
.cie-material-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-sm);
}

.cie-material-notes .cie-note-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.cie-material-notes .cie-note-label {
  font-weight: 500;
}

.cie-material-notes .cie-note-separator {
  color: var(--border-medium);
}

/* ========================================
   HS EXPLORER VIEW STYLES
   Two-column layout with chapter browser
   ======================================== */

/* Search Bar */
.cie-explorer-search-bar {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-primary);
  border: none;
  border-radius: var(--radius-lg);
}

.cie-explorer-search-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.cie-explorer-search-input-wrap > i {
  position: absolute;
  left: var(--space-md);
  color: var(--text-tertiary);
}

.cie-explorer-search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 40px;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: 1.5;
  background: var(--bg-primary);
  transition: border-color var(--duration-fast) var(--ease-default);
}

.cie-explorer-search-input:focus {
  outline: none;
  border-color: var(--astrovia-blue);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.cie-explorer-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
}

.cie-explorer-suggestion {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--duration-instant) var(--ease-default);
}

.cie-explorer-suggestion:hover,
.cie-explorer-suggestion.selected {
  background: var(--bg-secondary);
}

.cie-explorer-suggestion:last-child {
  border-bottom: none;
}

/* CI Scoped Select (fixes clipping issues) */
.cie-select {
  appearance: none;
  padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  background: var(--bg-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  min-width: 150px;
  cursor: pointer;
}

.cie-select:focus {
  outline: none;
  border-color: var(--astrovia-blue);
}

/* CI Form Controls - Overflow Fixes */
.cie-section .c-card {
  overflow: visible;
}

.cie-section .c-card-body {
  overflow: visible;
}

.cie-section .form-row {
  position: relative;
  z-index: 1;
}

.cie-section .form-group:focus-within {
  z-index: 10;
}

/* Ensure dropdown menus don't get clipped */
.cie-section select,
.cie-section .form-select,
.cie-section .form-input {
  position: relative;
}

/* CI scoped form inputs */
.cie-section .form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: 1.5;
  background: var(--bg-primary);
  transition: border-color var(--duration-fast) var(--ease-default);
}

.cie-section .form-input:focus {
  outline: none;
  border-color: var(--astrovia-blue);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* CI Admin Tabs - Hidden by default, shown for admin users */
.cie-admin-tab {
  display: none;
}

.cie-admin-tab.cie-admin-visible {
  display: inline-flex;
}

/* Two Column Layout */
.cie-explorer-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-lg);
  min-height: 500px;
}

@media (max-width: 1024px) {
  .cie-explorer-layout {
    grid-template-columns: 1fr;
  }
  .cie-explorer-chapters {
    display: none;
  }
  .cie-explorer-chapters.expanded {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 200;
    box-shadow: var(--shadow-xl);
  }
}

/* Chapter Browser (Left Rail) */
.cie-explorer-chapters {
  background: var(--bg-primary);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cie-explorer-chapters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.cie-explorer-chapters-header h3 {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cie-explorer-collapse-btn {
  display: none;
  padding: var(--space-xs);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-tertiary);
}

.cie-explorer-chapters-list {
  padding: var(--space-sm);
  max-height: 600px;
  overflow-y: auto;
}

.cie-explorer-section {
  margin-bottom: var(--space-md);
}

.cie-explorer-section-title {
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-xs);
}

.cie-explorer-chapter-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-instant) var(--ease-default);
  text-align: left;
}

.cie-explorer-chapter-btn:hover {
  background: var(--bg-secondary);
}

.cie-explorer-chapter-btn.active {
  background: rgba(0, 122, 255, 0.1);
}

.cie-chapter-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--astrovia-blue);
  background: rgba(0, 122, 255, 0.1);
  border-radius: var(--radius-sm);
}

.cie-chapter-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Guided Classification - Breadcrumb */
.cie-explorer-breadcrumb {
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-sm);
}

.cie-breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
}

.cie-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.cie-breadcrumb-item::before {
  content: '/';
  color: var(--text-tertiary);
}

.cie-breadcrumb-item:first-child::before {
  display: none;
}

.cie-breadcrumb-item button {
  background: none;
  border: none;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-breadcrumb-item button:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.cie-breadcrumb-item.cie-breadcrumb-current button {
  color: var(--text-primary);
  font-weight: 500;
  cursor: default;
}

.cie-breadcrumb-item.cie-breadcrumb-current button:hover {
  background: transparent;
}

/* Section Accordion */
.cie-explorer-section-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-default);
}

.cie-explorer-section-btn:hover {
  background: var(--bg-secondary);
}

.cie-explorer-section-btn .cie-explorer-section-title {
  flex: 1;
  padding: 0;
  margin: 0;
}

.cie-section-chevron {
  color: var(--text-tertiary);
  transition: transform var(--duration-normal) var(--ease-default);
}

.cie-explorer-section.expanded .cie-section-chevron {
  transform: rotate(180deg);
}

.cie-explorer-section-content {
  display: none;
  padding: var(--space-xs) 0 var(--space-sm);
}

.cie-explorer-section.expanded .cie-explorer-section-content {
  display: block;
}

/* Chapter Cards */
.cie-chapter-card {
  background: var(--bg-primary);
  border: none;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.cie-chapter-card:hover {
  border-color: var(--border-medium);
}

.cie-chapter-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  cursor: pointer;
}

.cie-chapter-info {
  flex: 1;
  min-width: 0;
}

.cie-chapter-desc {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

.cie-chapter-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border: none;
  border-top: 1px solid var(--border-light);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--astrovia-blue);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-chapter-start-btn:hover {
  background: rgba(0, 122, 255, 0.08);
}

.cie-chapter-start-btn i {
  font-size: var(--font-size-xs);
}

/* Chapter Guidance Callouts */
.cie-chapter-guidance {
  padding: var(--space-sm);
  margin-top: var(--space-xs);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.cie-guidance-title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.cie-guidance-title i {
  color: var(--text-tertiary);
}

.cie-guidance-text {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
  margin: 0;
}

.cie-guidance-text strong {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Chapter Context Panel */
.cie-chapter-context {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
}

.cie-context-header h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.cie-context-header p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.cie-context-notes {
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.cie-context-exclusions {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: none;
}

.cie-context-exclusions-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
}

.cie-context-exclusions-title i {
  color: var(--text-tertiary);
}

.cie-context-exclusions ul {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.cie-context-exclusions li {
  margin-bottom: var(--space-xs);
}

/* Main Results Panel */
.cie-explorer-main {
  background: var(--bg-primary);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cie-explorer-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.cie-results-count {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.cie-explorer-view-toggle {
  display: flex;
  gap: var(--space-xs);
}

.cie-view-btn {
  padding: var(--space-xs) var(--space-sm);
  border: none;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-tertiary);
  transition: all var(--duration-instant) var(--ease-default);
}

.cie-view-btn:hover {
  border-color: var(--border-medium);
}

.cie-view-btn.active {
  background: var(--astrovia-blue);
  border-color: var(--astrovia-blue);
  color: white;
}

.cie-explorer-results {
  padding: var(--space-md);
  min-height: 400px;
}

.cie-explorer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  color: var(--text-tertiary);
}

.cie-explorer-empty i {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.cie-explorer-empty h4 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
}

.cie-explorer-empty p {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* HS Result Items */
.cie-hs-result-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--duration-instant) var(--ease-default);
}

.cie-hs-result-item:hover {
  background: var(--bg-secondary);
}

.cie-hs-result-item:last-child {
  border-bottom: none;
}

.cie-hs-result-code {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--astrovia-blue);
  min-width: 100px;
}

.cie-hs-result-info {
  flex: 1;
}

.cie-hs-result-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.cie-hs-result-meta {
  display: flex;
  gap: var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

/* Detail Drawer */
.cie-explorer-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  max-width: 100%;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-medium);
  box-shadow: var(--shadow-xl);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-default);
}

.cie-explorer-drawer:not(.hidden) {
  transform: translateX(0);
}

.cie-drawer-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.cie-drawer-close {
  padding: var(--space-xs);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
}

.cie-drawer-close:hover {
  background: var(--bg-secondary);
}

.cie-drawer-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.cie-drawer-content {
  flex: 1;
  padding: var(--space-lg);
  overflow-y: auto;
}

.cie-drawer-actions {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 1px solid var(--border-light);
}

.cie-drawer-actions button {
  flex: 1;
}

/* Info Banner */
.cie-info-banner {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  margin-top: var(--space-lg);
  background: rgba(0, 122, 255, 0.05);
  border: 1px solid rgba(0, 122, 255, 0.15);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.cie-info-banner > i {
  color: var(--astrovia-blue);
  font-size: var(--font-size-2xl);
  flex-shrink: 0;
}

.cie-info-banner strong {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

.cie-info-banner p {
  margin: 0;
}

/* ========================================
   DUTY RATES VIEW STYLES
   Compare duty rates across countries
   ======================================== */

.cie-duty-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.cie-duty-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cie-duty-input-group label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.cie-duty-input-group input,
.cie-duty-input-group select {
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: 1.5;
  background: var(--bg-primary);
}

.cie-duty-input-group select {
  appearance: none;
  padding-right: var(--space-xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.cie-rate-card {
  background: var(--bg-primary);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cie-rate-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.cie-rate-card-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.cie-rate-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.cie-rate-row:last-child {
  border-bottom: none;
}

.cie-rate-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.cie-rate-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.cie-rate-value.preferential {
  color: var(--success);
}

/* Compare Mode Table */
.cie-compare-table {
  width: 100%;
  border-collapse: collapse;
}

.cie-compare-table th,
.cie-compare-table td {
  padding: var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.cie-compare-table th {
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
}

.cie-compare-table td {
  font-size: var(--font-size-sm);
}

/* Assumptions Accordion */
.cie-assumptions-accordion {
  border: none;
  border-radius: var(--radius-md);
  margin-top: var(--space-lg);
}

.cie-assumptions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  cursor: pointer;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.cie-assumptions-header:hover {
  background: var(--bg-tertiary);
}

.cie-assumptions-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.cie-assumptions-chevron {
  transition: transform var(--duration-fast) var(--ease-default);
  color: var(--text-tertiary);
}

.cie-assumptions-accordion.open .cie-assumptions-chevron {
  transform: rotate(180deg);
}

.cie-assumptions-content {
  padding: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: none;
}

.cie-assumptions-accordion.open .cie-assumptions-content {
  display: block;
}

/* Duty Rates Mode Toggle */
.cie-duty-mode-toggle {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  padding: var(--space-xs);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  width: fit-content;
}

.cie-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

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

.cie-mode-btn.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.cie-duty-mode-panel.hidden {
  display: none;
}

/* Compare Country Selection */
.cie-compare-country-select {
  margin-top: var(--space-md);
}

.cie-compare-country-select > label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.cie-country-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.cie-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
}

.cie-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--astrovia-blue);
}

/* Compare Results Table */
.cie-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}

.cie-compare-card {
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.cie-compare-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}

.cie-compare-country-flag {
  font-size: var(--font-size-3xl);
}

.cie-compare-country-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.cie-compare-rate-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  font-size: var(--font-size-sm);
}

.cie-compare-rate-label {
  color: var(--text-tertiary);
}

.cie-compare-rate-value {
  font-weight: 600;
  color: var(--text-primary);
}

.cie-compare-rate-value.best {
  color: var(--success);
}

/* Drawer Sections */
.cie-drawer-section {
  margin-bottom: var(--space-lg);
}

.cie-drawer-section h4 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cie-drawer-section p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.6;
}

.cie-drawer-breakdown {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cie-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.cie-breakdown-row:last-child {
  border-bottom: none;
}

.cie-breakdown-label {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.cie-breakdown-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--astrovia-blue);
}

.cie-drawer-hint {
  color: var(--text-tertiary) !important;
  font-style: italic;
}

/* ========================
   PHASE 4: HS BREAKDOWN TABLE IMPROVEMENTS
   ======================== */

/* Clean table layout for breakdown */
.cie-breakdown-table {
  width: 100%;
  border-collapse: collapse;
}

.cie-breakdown-table th,
.cie-breakdown-table td {
  padding: var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.cie-breakdown-table th {
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
}

.cie-breakdown-table td.cie-breakdown-level {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  width: 100px;
}

.cie-breakdown-table td.cie-breakdown-digits {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--astrovia-blue);
  width: 120px;
}

.cie-breakdown-table td.cie-breakdown-description {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.cie-breakdown-table tr:last-child td {
  border-bottom: none;
}

.cie-breakdown-table tr:hover td {
  background: var(--bg-secondary);
}

/* ========================
   PHASE 5: LABEL + SPACING FIXES
   ======================== */

/* Country label with flag - no weird splitting */
.cie-country-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.cie-flag-icon {
  font-size: var(--font-size-lg);
  line-height: 1;
}

.cie-country-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  white-space: nowrap;
}

/* Code rows with tight alignment */
.cie-code-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
}

.cie-code-row:last-child {
  border-bottom: none;
}

.cie-code-label {
  flex: 0 0 100px;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.cie-code-value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-primary);
}

/* Primary code gets blue but not too intense */
.cie-code-value.cie-code-primary {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--astrovia-blue);
}

/* ========================
   PHASE 6: ACCESSIBILITY & STATES
   ======================== */

/* Focus states for alternate cards */
.cie-alternate-item[tabindex]:focus {
  outline: none;
}

.cie-alternate-item[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--card-surface), 0 0 0 4px var(--astrovia-blue);
}

/* Screen reader only text */
.cie-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hover state indicator */
.cie-alternate-item::after {
  content: '';
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.cie-alternate-item:hover::after {
  opacity: 1;
}

/* Active state persists even when not hovered */
.cie-alternate-item.cie-alternate-selected {
  position: relative;
}

/* "Use This" button for alternates */
.cie-use-btn {
  padding: var(--space-xs) var(--space-sm);
  background: var(--astrovia-blue);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-on-primary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  opacity: 0;
}

.cie-alternate-item:hover .cie-use-btn,
.cie-alternate-item:focus-within .cie-use-btn {
  opacity: 1;
}

.cie-use-btn:hover {
  background: var(--blue-700);
}

.cie-use-btn:focus-visible {
  outline: 2px solid var(--astrovia-blue);
  outline-offset: 2px;
}

/* Breakdown Tab */
.cie-breakdown-container {
  max-width: 700px;
}

.cie-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cie-breakdown-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-lg);
}

.cie-breakdown-code {
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.cie-breakdown-code-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--astrovia-blue);
}

.cie-breakdown-code-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
}

.cie-breakdown-content {
  flex: 1;
}

.cie-breakdown-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.cie-breakdown-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Justification Tab */
.cie-justification-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 700px;
}

.cie-justification-section {
  padding: var(--space-lg);
  background: var(--card-surface);
  border: none;
  border-radius: var(--radius-lg);
}

.cie-justification-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
}

.cie-justification-title i {
  color: var(--astrovia-blue);
}

.cie-justification-list {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

.cie-justification-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.cie-references-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.cie-reference-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Explainability Sections */
.cie-explainability-section {
  border-left: 3px solid var(--astrovia-blue);
}

.cie-explainability-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cie-explainability-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  padding: var(--space-xs) 0;
}

.cie-explainability-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.cie-change-factors-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cie-change-factors-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.cie-change-factors-list li i {
  color: var(--warning-text);
  flex-shrink: 0;
  margin-top: 2px;
}

.cie-change-factors-list li strong {
  color: var(--text-primary);
}

/* Audit Trail Tab */
.cie-audit-container {
  overflow-x: auto;
}

.cie-audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.cie-audit-table th {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  font-weight: 600;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cie-audit-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.cie-audit-table tr:hover td {
  background: var(--bg-secondary);
}

.cie-audit-table tr.highlight td {
  background: var(--info-bg);
}

.cie-audit-empty {
  text-align: center;
  color: var(--text-tertiary);
  padding: var(--space-2xl) !important;
}

/* Decision Rationale System */
.cie-rationale-accordion {
  border: none;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  background: var(--card-surface);
}

.cie-rationale-accordion[open] .cie-rationale-chevron {
  transform: rotate(180deg);
}

.cie-rationale-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  list-style: none;
  user-select: none;
}

.cie-rationale-header::-webkit-details-marker {
  display: none;
}

.cie-rationale-header > i:first-child {
  color: var(--astrovia-blue);
}

.cie-rationale-header > span {
  flex: 1;
}

.cie-rationale-chevron {
  color: var(--text-tertiary);
  transition: transform var(--duration-normal) var(--ease-default);
}

.cie-rationale-body {
  padding: 0 var(--space-md) var(--space-md);
}

.cie-rationale-subsection {
  margin-bottom: var(--space-md);
}

.cie-rationale-subtitle {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-sm);
}

.cie-attributes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

@media (max-width: 640px) {
  .cie-attributes-grid {
    grid-template-columns: 1fr;
  }
}

.cie-attribute-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.cie-attribute-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.cie-attribute-value {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.cie-method-display {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cie-method-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.cie-method-item i {
  color: var(--text-tertiary);
}

.cie-method-label {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.cie-method-value {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.cie-contributors-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cie-contributor-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.cie-contributor-positive {
  background: var(--success-bg);
}

.cie-contributor-positive i {
  color: var(--success-500);
}

.cie-contributor-negative {
  background: var(--warning-bg);
}

.cie-contributor-negative i {
  color: var(--warning-500);
}

/* Assumptions Panel */
.cie-assumptions-card {
  margin-bottom: var(--space-md);
}

.cie-assumptions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.cie-assumptions-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.cie-assumptions-title i {
  color: var(--astrovia-blue);
}

.cie-assumptions-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-assumptions-edit:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.cie-assumptions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.cie-assumption-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cie-assumption-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.cie-assumption-value {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.cie-assumption-timestamp .cie-assumption-value {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-xs);
}

/* Audit Summary Section */
.cie-audit-summary-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-light);
}

.cie-audit-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  gap: var(--space-md);
}

.cie-audit-summary-title-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cie-audit-summary-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.cie-audit-summary-title i {
  color: var(--astrovia-blue);
}

.cie-audit-export-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cie-plan-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-style: italic;
}

.cie-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: var(--radius-full);
}

.cie-plan-badge--governance {
  background: var(--surface-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

.cie-recorded-decision {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  margin-top: var(--space-lg);
}

.cie-recorded-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.cie-recorded-status i {
  font-size: var(--font-size-xl);
  color: var(--text-secondary);
}

.cie-recorded-helper {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: 0;
  font-style: italic;
}

.cie-audit-export-btn {
  font-size: var(--font-size-sm);
  padding: var(--space-xs) var(--space-sm);
}

.cie-audit-export-btn i {
  margin-right: var(--space-xs);
}

.cie-audit-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .cie-audit-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .cie-audit-summary-grid {
    grid-template-columns: 1fr;
  }
}

.cie-audit-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.cie-audit-summary-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.cie-audit-summary-value {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.cie-audit-history-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 var(--space-md);
}

/* Compare Modal */
.cie-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}

.cie-modal.hidden {
  display: none;
}

.cie-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  opacity: 0;
  animation: cie-fadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cie-modal-content {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--card-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--modal-shadow);
  opacity: 0;
  transform: translateY(8px);
  animation: cie-slideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes cie-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.cie-modal.closing .cie-modal-backdrop {
  animation: cie-fadeOut 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cie-modal.closing .cie-modal-content {
  animation: cie-slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes cie-fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

.cie-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-light);
}

.cie-modal-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.cie-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.cie-modal-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.cie-compare-summary {
  padding: var(--space-lg) var(--space-xl);
  background: var(--info-bg);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--font-size-sm);
  color: var(--astrovia-blue);
}

.cie-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  padding: var(--space-xl);
}

@media (max-width: 640px) {
  .cie-compare-grid {
    grid-template-columns: 1fr;
  }
}

.cie-compare-col-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}

.cie-compare-data {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cie-compare-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  font-size: var(--font-size-sm);
}

.cie-compare-row.differ {
  background: var(--warning-bg);
  margin: 0 calc(-1 * var(--space-sm));
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.cie-compare-label {
  color: var(--text-tertiary);
}

.cie-compare-value {
  font-weight: 500;
  color: var(--text-primary);
}

/* Info Expandable */
.cie-info-expandable {
  padding: var(--space-xl);
  border-top: 1px solid var(--border-light);
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .cie-input-card {
    padding: var(--space-lg);
  }
  
  .cie-form-row {
    grid-template-columns: 1fr;
  }
  
  .cie-results-tabs-container {
    padding: var(--space-sm);
  }
  
  .cie-results-tab {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
  }
  
  .cie-results-content {
    padding: var(--space-lg);
  }
  
  .cie-code-label {
    flex: 0 0 80px;
    font-size: var(--font-size-sm);
  }
  
  .cie-code-value {
    font-size: var(--font-size-sm);
  }
  
  .cie-code-primary {
    font-size: var(--font-size-lg);
  }
}

/* ========================================
   DUTY ESTIMATOR REDESIGN (Phase 3)
   Apple/Stripe-level 2-column layout
   ========================================
   
   DESIGN SYSTEM COMPLIANCE
   - All colors use Astrovia tokens
   - All spacing uses --space-* tokens
   - All radii use --radius-* tokens
   - All shadows use --shadow-* tokens
   - Transitions use cubic-bezier(0.4, 0, 0.2, 1)
   ======================================== */

.de-content {
  padding: var(--space-lg);
}

/* 2-Column Grid Layout */
.de-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 1024px) {
  .de-grid {
    grid-template-columns: 1fr;
  }
}

/* Card Styles */
.de-inputs-card,
.de-results-card {
  padding: var(--space-xl);
}

.de-card-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.de-card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-2xs) 0;
}

.de-card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: 0;
}

/* Form Styles */
.de-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.de-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.de-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 640px) {
  .de-form-row {
    grid-template-columns: 1fr;
  }
}

.de-form-group-lg {
  flex: 2;
}

.de-form-group-sm {
  flex: 1;
}

.de-label-hint {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--text-tertiary);
  margin-top: var(--space-2xs);
}

/* HS Code Input with Prefill Badge */
.de-hs-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.de-hs-input-wrapper .form-input {
  flex: 1;
}

.de-prefill-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--astrovia-blue-bg);
  color: var(--astrovia-blue);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: none;
  cursor: default;
  white-space: nowrap;
}

.de-prefill-indicator i {
  font-size: var(--font-size-xs);
}

/* Currency Input */
.de-currency-input {
  display: flex;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-default);
}

.de-currency-input:focus-within {
  border-color: var(--astrovia-blue);
  box-shadow: var(--focus-ring-input);
}

.de-currency-select {
  flex: 0 0 80px;
  border: none;
  background: var(--bg-secondary);
  padding: var(--space-sm) var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  border-right: 1px solid var(--border-light);
}

.de-currency-select:focus {
  outline: none;
}

.de-currency-input .form-input {
  border: none;
  border-radius: 0;
  flex: 1;
}

.de-currency-input .form-input:focus {
  box-shadow: none;
}

/* Value Input with Symbol */
.de-value-input {
  position: relative;
}

.de-currency-symbol {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--font-size-sm);
}

.de-value-input .form-input {
  padding-left: var(--space-xl);
}

/* Valuation Info */
.de-valuation-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.de-valuation-info i {
  color: var(--text-tertiary);
}

.de-valuation-info strong {
  color: var(--text-primary);
}

/* Action Buttons */
.de-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.de-actions .c-btn-primary {
  flex: 1;
}

.de-actions .c-btn-primary i {
  margin-right: var(--space-xs);
}

/* Empty State */
.de-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
}

.de-empty-icon {
  width: 77px;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
}

.de-empty-icon i {
  font-size: var(--font-size-3xl);
  color: var(--text-tertiary);
}

.de-empty-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
}

.de-empty-text {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: 0;
  max-width: 280px;
}

/* Loading Skeleton */
.de-loading-state {
  padding: var(--space-lg);
}

.de-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 25%,
    var(--bg-tertiary) 50%,
    var(--bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: de-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.de-skeleton-header {
  height: 48px;
  width: 60%;
  margin-bottom: var(--space-lg);
}

.de-skeleton-row {
  height: 20px;
  margin-bottom: var(--space-md);
}

.de-skeleton-total {
  height: 40px;
  margin-top: var(--space-lg);
}

@keyframes de-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .de-skeleton {
    animation: none;
    background: var(--bg-secondary);
  }
}

/* Results Content */
.de-results-content {
  opacity: 0;
  animation: de-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Total Header */
.de-total-header {
  text-align: center;
  padding: var(--space-lg);
  background: linear-gradient(135deg, var(--astrovia-blue-bg) 0%, var(--bg-secondary) 100%);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.de-total-amount {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.de-total-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.de-total-currency {
  color: var(--text-tertiary);
}

.de-total-note {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

/* Sections */
.de-section {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-light);
}

.de-section:last-of-type {
  border-bottom: none;
}

.de-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.de-section-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.de-section-amount {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

.de-section-note {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: var(--space-xs) 0 0 0;
}

.de-section-source {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

.de-section-source i {
  font-size: var(--font-size-xs);
}

/* Summary Section */
.de-summary-section {
  background: var(--bg-secondary);
  margin: 0 calc(-1 * var(--space-xl));
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--border-light);
}

.de-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  text-align: center;
}

@media (max-width: 640px) {
  .de-summary-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }
  
  .de-summary-item {
    display: flex;
    justify-content: space-between;
  }
}

.de-summary-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  display: block;
}

.de-summary-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--space-2xs);
}

/* De Minimis Section */
.de-deminimis-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.de-deminimis-badge,
.de-valuation-badge {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.de-deminimis-badge i {
  color: var(--info);
}

.de-deminimis-badge.above-threshold {
  background: var(--warning-bg);
}

.de-deminimis-badge.above-threshold i {
  color: var(--warning);
}

.de-deminimis-badge.below-threshold {
  background: var(--success-bg);
}

.de-deminimis-badge.below-threshold i {
  color: var(--success);
}

/* Landed Cost Section */
.de-landed-section {
  background: var(--success-bg);
  margin: var(--space-md) calc(-1 * var(--space-xl)) 0;
  padding: var(--space-lg) var(--space-xl);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-bottom: none;
}

.de-landed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.de-landed-title {
  font-weight: 600;
  color: var(--success-dark);
  font-size: var(--font-size-md);
}

.de-landed-amount {
  font-weight: 700;
  color: var(--success-dark);
  font-size: var(--font-size-3xl);
}

.de-landed-breakdown {
  font-size: var(--font-size-xs);
  color: var(--success);
  margin: var(--space-xs) 0 0 0;
}

/* Data Sources */
.de-sources {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-lg);
}

.de-sources i {
  color: var(--success);
}

/* Compare CTA */
.de-compare-cta {
  margin-top: var(--space-lg);
  text-align: center;
}

.de-compare-cta .c-btn-outline {
  width: 100%;
}

.de-compare-cta .c-btn-outline i {
  margin-right: var(--space-xs);
}

/* Disclaimer */
.de-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--warning-bg);
  border-radius: var(--radius-md);
  margin-top: var(--space-xl);
}

.de-disclaimer i {
  color: var(--warning);
  font-size: var(--font-size-2xl);
  flex-shrink: 0;
  margin-top: 2px;
}

.de-disclaimer p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--warning-dark);
}

/* Compare Destinations Modal */
.de-compare-body {
  padding: var(--space-xl);
}

.de-compare-intro {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg) 0;
}

.de-compare-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 640px) {
  .de-compare-selectors {
    grid-template-columns: 1fr;
  }
}

.de-compare-selector label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.de-compare-results {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-lg);
}

.de-compare-results-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
}

.de-compare-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.de-compare-row {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: none;
}

.de-compare-row.lowest {
  background: var(--success-bg);
  border-color: var(--success);
}

.de-compare-country {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.de-compare-country-name {
  font-weight: 600;
  color: var(--text-primary);
}

.de-compare-lowest-badge {
  display: inline-flex;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--success);
  color: var(--text-on-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
}

.de-compare-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

@media (max-width: 640px) {
  .de-compare-values {
    grid-template-columns: repeat(2, 1fr);
  }
}

.de-compare-value {
  text-align: center;
}

.de-compare-value-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.de-compare-value-amount {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--space-2xs);
}

.de-compare-total .de-compare-value-amount {
  font-size: var(--font-size-md);
  color: var(--astrovia-blue);
}

.de-compare-row.lowest .de-compare-total .de-compare-value-amount {
  color: var(--success-dark);
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .de-content {
    padding: var(--space-md);
  }
  
  .de-inputs-card,
  .de-results-card {
    padding: var(--space-lg);
  }
  
  .de-actions {
    flex-direction: column;
  }
  
  .de-actions .c-btn-primary,
  .de-actions .c-btn-tertiary {
    width: 100%;
  }
  
  .de-total-amount {
    font-size: var(--font-size-4xl);
  }
  
  .de-summary-section {
    margin: 0 calc(-1 * var(--space-lg));
    padding: var(--space-md) var(--space-lg);
  }
  
  .de-landed-section {
    margin: var(--space-md) calc(-1 * var(--space-lg)) 0;
    padding: var(--space-lg);
  }
}

/* ========================================
   FILTER CONTROLS ROW
   Standardized layout for filter dropdowns
   ======================================== */
.ds-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.ds-controls-group {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.ds-filter-select {
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--bg-white);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--ease-default);
}

.ds-filter-select:hover {
  border-color: var(--astrovia-blue);
}

.ds-filter-select:focus {
  outline: none;
  border-color: var(--astrovia-blue);
  box-shadow: var(--focus-ring-input);
}

/* ========================================
   TRADEMARK SUPERSCRIPT
   ======================================== */
.trademark-sup {
  font-size: var(--font-size-xs);
  vertical-align: super;
  color: var(--text-tertiary);
  margin-left: 2px;
}

/* Content subtitle inline (smaller, under title) */
.content-subtitle-inline {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 400;
}

/* ========================================
   CIE/NEXUS CARD HEADER
   Icon + title + button layout
   ======================================== */
.ds-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.ds-card-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.ds-card-icon {
  width: 44px;
  height: 44px;
  background: var(--info-bg);
  border: none;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--astrovia-blue);
  flex-shrink: 0;
}

.ds-card-icon svg {
  width: 22px;
  height: 22px;
}

.ds-card-icon i {
  font-size: var(--font-size-2xl);
}

.ds-card-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.ds-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

/* ========================================
   PRIMARY ANALYTICS CANVAS
   Globe + Country Breakdown as ONE narrative surface
   Apple Maps + Apple Finance reference
   ======================================== */
.analytics-visual-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

/* Section title for the unified analytics canvas */
.analytics-visual-section::before {
  content: "Geographic Revenue Distribution";
  grid-column: 1 / -1;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

@media (max-width: 900px) {
  .analytics-visual-section {
    grid-template-columns: 1fr;
  }
}

/* Chart Container - No card styling (parent has it) */
.analytics-chart-container {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.analytics-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
  letter-spacing: -0.01em;
}

.analytics-chart-wrapper {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-md);
}

/* Hide the donut chart - globe only design */
.analytics-chart-wrapper canvas#revenueDonutChart {
  display: none !important;
}

/* Globe Container - Interactive 3D Earth (40% larger, centered) */
.globe-container {
  position: relative;
  width: 240px;
  height: 240px;
  min-width: 240px;
  min-height: 240px;
  max-width: 240px;
  max-height: 240px;
  aspect-ratio: 1 / 1;
  z-index: 15;
  pointer-events: auto;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  overflow: hidden;
}

/* Globe canvas - starts hidden, fades in smoothly */
.globe-container canvas {
  width: 240px !important;
  height: 240px !important;
  min-width: 240px;
  min-height: 240px;
  aspect-ratio: 1 / 1;
  position: absolute;
  z-index: 2;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--duration-layout) var(--ease-default), transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  object-fit: contain;
}

.globe-container.globe-ready canvas {
  opacity: 1;
  transform: scale(1);
}

.globe-container:active {
  cursor: grabbing;
}

/* Globe Texture Switcher - positioned below globe in container */
.globe-texture-switcher {
  position: relative;
  margin-top: var(--space-xl);
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-glass);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-lighter);
  box-shadow: var(--shadow-sm);
  z-index: 100;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Globe Control Buttons - Neutral surface, blue for interaction states only */
.globe-texture-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: var(--card-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-muted);
  transition: all var(--duration-fast) var(--ease-default);
  padding: 0;
  flex-shrink: 0;
}

.globe-texture-btn:hover {
  background: var(--card-surface);
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
}

.globe-texture-btn.active {
  background: var(--info-bg);
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
}

.globe-texture-btn:focus-visible {
  outline: none;
  border-color: var(--astrovia-blue);
  box-shadow: var(--focus-ring);
}

.globe-texture-btn i {
  font-size: var(--font-size-lg);
  line-height: 1;
}

/* Globe fallback emoji */
.globe-fallback {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Globe loading overlay - shown during texture switch */
.globe-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--loading-overlay-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-full);
  z-index: 10;
  opacity: 1;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.globe-loading-overlay.fade-out {
  opacity: 0;
}

.globe-loading-bar {
  width: 60%;
  height: 4px;
  background: var(--border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.globe-loading-progress {
  height: 100%;
  width: 30%;
  background: var(--astrovia-blue);
  border-radius: var(--radius-full);
  animation: globeLoadingSlide 1s ease-in-out infinite;
}

@keyframes globeLoadingSlide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* Globe HUD Pill - Replaces title, shows revenue/country info */
.globe-hud-pill {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: var(--bg-subtle);
  padding: 8px 16px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-lighter);
  margin-bottom: 16px;
  min-height: 40px;
  width: fit-content;
}

.hud-idle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.hud-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.hud-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.hud-country {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.hud-country-flag {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.hud-country-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.hud-separator {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  font-weight: 400;
}

.hud-country-revenue {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--astrovia-blue);
}

.hud-country-orders {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

/* Countries Container - Equal Height */
.analytics-countries-container {
  background: var(--bg-white);
  border: 1px solid var(--border-lighter);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: 0 1px 3px var(--hover-overlay);
  display: flex;
  flex-direction: column;
}

.analytics-countries-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

/* Unified Filter Button - Show All */
.analytics-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--filter-height);
  padding: 6px 12px;
  background: var(--filter-bg);
  border: 1px solid var(--filter-border);
  border-radius: var(--filter-radius);
  font-size: var(--filter-font-size);
  font-weight: var(--filter-font-weight);
  color: var(--filter-text);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.analytics-expand-btn:hover {
  background-color: var(--filter-hover-bg);
  border-color: var(--filter-hover-border);
  color: var(--filter-hover-text);
}

.analytics-expand-btn svg {
  width: var(--filter-chevron-size);
  height: var(--filter-chevron-size);
}

.analytics-expand-btn #expand-btn-icon {
  transition: transform var(--duration-layout) var(--ease-default);
}

.analytics-expand-btn.expanded #expand-btn-icon {
  transform: rotate(180deg);
}

/* Countries Grid V2 - 2 Columns Layout */
.analytics-countries-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  flex: 1;
  overflow: hidden;
  align-content: start;
}

/* Smooth collapse animation for extra items - show only 8 (2×4) when collapsed */
.analytics-countries-grid-v2:not(.expanded) .analytics-country-card-v2:nth-child(n+9) {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -10px; /* Offset the gap */
  opacity: 0;
  border-color: transparent;
  overflow: hidden;
  pointer-events: none;
}

.analytics-country-card-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  min-width: 0;
  /* Smooth transition for expand/collapse */
  max-height: 200px;
  transition: max-height var(--duration-layout) var(--ease-default),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.analytics-country-card-v2:hover {
  border-color: var(--astrovia-blue);
  background: var(--info-bg);
}

.analytics-country-card-v2:focus-visible {
  outline: none;
  border-color: var(--astrovia-blue);
  box-shadow: var(--card-shadow), var(--focus-ring-sm);
}

.analytics-country-card-v2.active {
  background: var(--info-bg);
  border-color: var(--astrovia-blue);
}

.analytics-country-flag-v2 {
  font-size: var(--font-size-2xl);
  line-height: 1;
  flex-shrink: 0;
}

.analytics-country-info-v2 {
  flex: 1;
  min-width: 0;
}

.analytics-country-name-v2 {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.2;
}

.analytics-country-metrics-v2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.analytics-country-metric-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.analytics-country-metric-item .metric-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* Responsive: 1 column on very small screens */
@media (max-width: 400px) {
  .analytics-countries-grid-v2 {
    grid-template-columns: 1fr;
  }
}

.analytics-country-metric-item {
  display: flex;
  align-items: center;
  gap: 3px;
}

.analytics-country-metric-item .metric-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* Country Detail Panel Wrapper - Smooth Height Transitions */
.country-detail-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-layout) var(--ease-default);
  margin-top: 20px;
}

.country-detail-wrapper.expanded {
  grid-template-rows: 1fr;
}

.country-detail-wrapper .country-tax-detail-v2 {
  overflow: hidden;
}

/* Country Detail Panel V2 - Neutral Surface */
.country-tax-detail-v2 {
  padding: 24px;
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--duration-slow) var(--ease-default), 
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.country-detail-wrapper.expanded .country-tax-detail-v2 {
  opacity: 1;
  transform: translateY(0);
}

.country-tax-detail-header-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--info-border);
}

.country-tax-detail-header-v2 h4 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.country-tax-close-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-white);
  border: 1px solid var(--border-lighter);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-tertiary);
  transition: all var(--duration-normal);
}

.country-tax-close-v2:hover {
  background: var(--bg-secondary);
  border-color: var(--border-light);
  color: var(--text-primary);
}

.country-tax-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

@media (max-width: 800px) {
  .country-tax-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.country-tax-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-white);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-lighter);
}

.country-tax-metric-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.country-tax-metric-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--astrovia-blue);
  letter-spacing: -0.01em;
}

.country-tax-notes-v2 {
  padding: 16px 18px;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-lighter);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Analytics Loading State - Premium Skeleton Shimmer */
.analytics-loading-state {
  position: relative;
  pointer-events: none;
}

.analytics-loading-state::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.6) 50%, 
    transparent 100%);
  animation: shimmer 1.5s infinite;
  border-radius: inherit;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.analytics-skeleton {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.analytics-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.4) 50%, 
    transparent 100%);
  animation: shimmer 1.5s infinite;
}

.analytics-skeleton-value {
  height: 32px;
  width: 80%;
  margin-top: 8px;
}

.analytics-skeleton-label {
  height: 12px;
  width: 60%;
}

/* Loading overlay for period changes */
.analytics-refreshing .analytics-metrics-row,
.analytics-refreshing .analytics-visual-section {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.analytics-refresh-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--bg-white);
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  box-shadow: var(--shadow-card-hover);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.analytics-refreshing .analytics-refresh-indicator {
  display: flex;
}

.refresh-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-light);
  border-top-color: var(--astrovia-blue);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

/* Connect Store Prompt - Uses unified card surface tokens */
.shopify-connect-prompt {
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  margin-top: 24px;
  text-align: center;
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
}

.connect-prompt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  margin-bottom: 24px;
  color: var(--astrovia-blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px var(--hover-overlay);
  border: 1px solid var(--hover-overlay);
}

.connect-prompt-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

.connect-prompt-text {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0 auto 28px auto;
  max-width: 420px;
  line-height: 1.6;
}

.connect-prompt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background: var(--astrovia-blue);
  color: var(--text-on-brand);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-slow) var(--ease-default);
  box-shadow: var(--shadow-btn-primary);
}

.connect-prompt-btn:hover {
  background: var(--astrovia-blue-hover);
  box-shadow: var(--shadow-btn-primary-hover);
}

/* Dashboard Tools Grid */
.dashboard-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}

@media (max-width: 900px) {
  .dashboard-tools-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-tool-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-xl);
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-slow) var(--ease-default);
  text-align: left;
  font-family: inherit;
  box-shadow: var(--shadow-1);
}

.dashboard-tool-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-1-hover);
}

.dashboard-tool-card:hover .dashboard-tool-chevron {
  transform: translateX(4px);
  color: var(--astrovia-blue);
}

.dashboard-tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--info-bg);
  border: none;
  border-radius: var(--radius-md);
  color: var(--astrovia-blue);
  flex-shrink: 0;
}

.dashboard-tool-content {
  flex: 1;
  min-width: 0;
}

.dashboard-tool-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.dashboard-tool-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.dashboard-tool-chevron {
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: all var(--duration-normal) var(--ease-default);
}

/* Admin Card */
.admin-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-card);
}

/* Account Card */
.account-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-card);
}

.account-card-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}

/* Account Info Styles */
.account-info {
  margin-bottom: 0;
}

.account-info-row {
  display: flex;
  align-items: flex-start;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.account-info-row:last-child {
  border-bottom: none;
}

.account-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 120px;
}

.account-value {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
}

.account-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-tool-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-section);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  transition: all var(--duration-fast) var(--ease-default);
}

.account-tool-badge:hover {
  border-color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
}

.account-tool-badge.admin-badge {
  background: var(--astrovia-blue-subtle);
  color: var(--astrovia-blue);
  border-color: var(--astrovia-blue-border);
}

.account-tool-badge.no-tools {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  border-color: var(--border-light);
}

/* Profile Section Styles */
.profile-section {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.profile-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--info-bg) 0%, var(--astrovia-blue-border) 100%);
  color: var(--astrovia-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-4xl);
  border: 3px solid var(--astrovia-blue-border);
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-image-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.profile-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.profile-upload-btn:hover {
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
  background: var(--info-bg);
}

.profile-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.profile-remove-btn:hover {
  border-color: var(--error);
  color: var(--error);
  background: var(--error-tint);
}

.profile-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-email {
  display: block;
  padding: 10px 0;
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  .profile-section {
    flex-direction: column;
    align-items: center;
  }
  
  .profile-details {
    width: 100%;
  }
}

/* ========================================
   Account Page V2 - Modern Design System
   ======================================== */

.account-settings-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-xl);
  max-width: 1140px;
}

@media (max-width: 1024px) {
  .account-settings-grid {
    grid-template-columns: 1fr 320px;
    gap: var(--space-lg);
  }
}

@media (max-width: 900px) {
  .account-settings-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.account-main-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.account-side-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .account-side-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  
  .account-side-column .protection-card {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .account-side-column {
    grid-template-columns: 1fr;
  }
  
  .account-side-column .protection-card {
    grid-column: span 1;
  }
}

/* Account Card V2 */
.account-card-v2 {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.account-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
  background: transparent;
}

/* Task B: Card header icons - transparent, no pill backgrounds */
.account-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-muted);
  flex-shrink: 0;
}

.account-card-icon.security-icon {
  background: transparent;
  color: var(--success);
}

/* Profile Icon - hidden since My Account header is above */
.profile-icon-v2 {
  display: none;
}

.profile-icon-v2 i {
  font-size: var(--font-size-lg);
}

/* Security Card v2 */
.security-card-v2 {
  border: 1px solid var(--border-subtle);
}

/* Security icon - light green filled circle with dark green icon (matches protection checkmarks) */
.account-card-icon.security-icon-v2 {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--success-bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--success-dark);
}

.account-card-icon.security-icon-v2 i {
  font-size: var(--font-size-lg);
  color: var(--success-dark);
}

.account-card-header-text {
  flex: 1;
}

.account-card-title-v2 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.015em;
}

.account-card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: 2px 0 0 0;
}

/* Profile Section V2 */
.profile-section-v2 {
  display: flex;
  gap: var(--space-2xl);
  padding: var(--space-xl);
  align-items: flex-start;
}

.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

.profile-avatar-v2 {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--info-bg) 0%, var(--astrovia-blue-subtle) 100%);
  color: var(--astrovia-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-3xl);
  border: 1px solid var(--avatar-border-photo);
  overflow: hidden;
  transition: all var(--duration-slow) var(--ease-default);
}

/* Blue border for placeholder/initial avatars */
.profile-avatar-v2--placeholder {
  border-color: var(--blue-200);
}

.profile-avatar-v2:hover {
  border-color: var(--neutral-300);
  box-shadow: var(--shadow-md);
}

.profile-avatar-v2--placeholder:hover {
  border-color: var(--blue-300);
}

.profile-avatar-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-actions {
  display: flex;
  gap: var(--space-xs);
}

.avatar-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.avatar-upload-btn:hover {
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
  background: var(--info-bg);
}

.avatar-remove-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
}

.avatar-remove-btn:hover {
  border-color: var(--error);
  color: var(--error);
  background: var(--error-tint);
}

/* Hide native file inputs - use styled label buttons instead */
#profile-image-upload,
.profile-avatar-section input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.profile-form-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Form Elements V2 */
.form-group-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-label-v2 {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.form-input-v2 {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--input-surface);
  transition: all var(--duration-normal) var(--ease-default);
}

.form-input-v2.has-toggle {
  padding-right: var(--space-3xl);
}

.form-input-v2:focus {
  outline: none;
  border-color: var(--astrovia-blue);
  box-shadow: var(--focus-ring-input);
}

.form-input-v2::placeholder {
  color: var(--text-tertiary);
}

.form-static-value {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-section);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.form-static-value svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 600px) {
  .form-row-2col {
    grid-template-columns: 1fr;
  }
  
  .profile-section-v2 {
    flex-direction: column;
    align-items: center;
  }
  
  .profile-form-section {
    width: 100%;
  }
}

/* Account Card Footer */
.account-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  background: var(--bg-section);
  border-top: 1px solid var(--border-subtle);
}

.account-card-footer .form-result {
  flex: 1;
}

/* Buttons V2 - Apple-style */
.btn-primary-v2 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
  color: var(--text-on-brand);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--duration-fast) cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
              opacity 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 2px 8px var(--astrovia-blue-border);
  -webkit-tap-highlight-color: transparent;
}

.btn-primary-v2:hover {
  box-shadow: 0 4px 12px var(--nexus-approaching-border);
}

.btn-primary-v2:active {
  opacity: 0.9;
  transition: transform 0.06s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.btn-secondary-v2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--duration-fast) cubic-bezier(0.25, 0.1, 0.25, 1),
              border-color 0.15s cubic-bezier(0.25, 0.1, 0.25, 1),
              color 0.15s cubic-bezier(0.25, 0.1, 0.25, 1),
              background-color 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-tap-highlight-color: transparent;
}

.btn-secondary-v2:hover {
  border-color: var(--astrovia-blue);
  color: var(--astrovia-blue);
  background: var(--info-bg);
}

.btn-secondary-v2:active {
  transform: scale(0.97);
  transition: transform 0.06s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Security Settings V2 */
.security-settings-v2 {
  padding: var(--space-lg) var(--space-xl);
}

.security-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.security-option-info {
  flex: 1;
}

.security-option-label {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-2xs);
}

.security-option-desc {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* Toggle Switch V2 - Apple-style
   Now uses canonical toggle tokens for consistency */
.toggle-switch-v2 {
  position: relative;
  display: inline-block;
  width: var(--toggle-width);
  height: var(--toggle-height);
  flex-shrink: 0;
}

.toggle-switch-v2 input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider-v2 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--toggle-bg-off);
  transition: background-color var(--duration-normal) var(--ease-default);
  border-radius: var(--radius-toggle);
}

.toggle-slider-v2:before {
  position: absolute;
  content: "";
  height: var(--toggle-knob-size);
  width: var(--toggle-knob-size);
  left: var(--toggle-knob-offset);
  bottom: var(--toggle-knob-offset);
  background-color: var(--text-inverse);
  /* Smooth transitions for ALL properties */
  transition: transform var(--duration-normal) cubic-bezier(0.25, 0.1, 0.25, 1),
              width 0.15s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  border-radius: var(--radius-toggle);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15),
              0 1px 1px rgba(0, 0, 0, 0.06);
}

/* Hover effect on track */
.toggle-switch-v2:hover .toggle-slider-v2:before {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18),
              0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Active press effect - expand thumb when unchecked */
.toggle-switch-v2:active .toggle-slider-v2:before {
  width: calc(var(--toggle-knob-size) + 4px);
}

.toggle-switch-v2 input:checked + .toggle-slider-v2 {
  background: var(--toggle-bg-on);
}

.toggle-switch-v2 input:checked + .toggle-slider-v2:before {
  transform: translateX(calc(var(--toggle-width) - var(--toggle-knob-size) - var(--toggle-knob-offset) * 2));
}

/* Active press effect when checked - expand and shift left to compensate */
.toggle-switch-v2:active input:checked + .toggle-slider-v2:before {
  width: calc(var(--toggle-knob-size) + 4px);
  transform: translateX(calc(var(--toggle-width) - var(--toggle-knob-size) - var(--toggle-knob-offset) * 2 - 4px));
}

.security-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  background: var(--feature-mint-gradient);
  color: var(--success);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-lg);
}

.security-divider-v2 {
  height: 1px;
  background: var(--border-subtle);
  margin: 0 var(--space-xl);
}

/* Password Section */
.password-section {
  padding: var(--space-lg) var(--space-xl);
}

.password-section-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
}

.password-form-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Form Result */
.form-result {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.form-result .result-success {
  color: var(--success);
  background: var(--feature-mint-gradient);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

.form-result .result-error {
  color: var(--error-dark);
  background: var(--error-bg);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
}

/* Info Cards (Side Column) - Apple-style Status Stack */
.account-info-card {
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: var(--card-shadow);
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow 0.2s var(--ease-default);
}

.account-info-card:hover {
  box-shadow: var(--shadow-md);
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.info-card-header svg,
.info-card-header i {
  color: var(--text-tertiary);
  font-size: var(--font-size-lg);
}

/* Tools Badge List */
.tools-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tools-badge-list .account-tool-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-section);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  transition: all var(--duration-fast) var(--ease-default);
}

.tools-badge-list .account-tool-badge:hover {
  border-color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
}

.tools-badge-list .account-tool-badge.admin-badge {
  background: var(--astrovia-blue-subtle);
  color: var(--astrovia-blue);
  border: 1px solid var(--astrovia-blue-border);
}

.tools-badge-list .account-tool-badge.no-tools {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  border-color: var(--border-light);
}

/* Tax Markets Badge List */
.tax-markets-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tax-markets-badge-list .no-markets {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  font-style: italic;
}

/* Organization Info in Account */
.account-org-info {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.account-org-info .org-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-org-info .org-info-row i {
  color: var(--astrovia-blue);
  font-size: var(--font-size-xl);
}

.account-org-info .org-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.account-org-info .no-org {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  font-style: italic;
}

.tax-markets-badge-list .markets-label {
  width: 100%;
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.tax-market-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-section);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  transition: all var(--duration-fast) var(--ease-default);
}

.tax-market-item:hover {
  border-color: var(--astrovia-blue);
  background: var(--astrovia-blue-subtle);
}

.tax-market-flag {
  font-size: var(--font-size-xl);
  line-height: 1;
}

.tax-market-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* Task D: Auto-pay indicators - both ON and OFF states visible */
.auto-pay-indicator {
  display: inline-flex;
  padding: 2px 6px;
  background: var(--pill-brand-bg);
  color: var(--pill-brand-text);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
}

.auto-pay-indicator.off,
.auto-pay-indicator--off {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: none;
}

/* Subscription Status V2 */
.subscription-status-v2 {
  min-height: 40px;
}

.subscription-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: 100%;
}

.subscription-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.subscription-badge-icon i {
  font-size: var(--font-size-lg);
}

.subscription-badge-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subscription-badge-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.subscription-badge-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Success variant for active subscriptions - clean flat design */
.subscription-badge--success {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
}

.subscription-badge-icon--success {
  background: var(--success-bg);
  color: var(--success-dark);
}

.subscription-manage-btn {
  font-size: var(--font-size-sm);
  margin-top: var(--space-md);
  width: 100%;
}

.loading-spinner-small {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* Organization subscription badge - clean flat design */
.subscription-badge--org {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
}

/* Organization member contact notice */
.subscription-org-member-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.subscription-org-contact-notice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--info-bg);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--info-text);
}

.subscription-org-contact-notice i {
  font-size: var(--font-size-lg);
  color: var(--info);
  flex-shrink: 0;
}

/* Protection Card - Clean design matching other cards */
.protection-card {
  background: var(--bg-surface);
  border: 1px solid var(--card-border);
}

.protection-card:hover {
  box-shadow: var(--shadow-md);
}

.protection-card .info-card-header {
  border-bottom-color: var(--border-light);
}

.protection-card .info-card-header svg,
.protection-card .info-card-header i {
  font-size: var(--font-size-lg);
  color: var(--text-tertiary);
}

.protection-card .info-card-header span {
  color: var(--text-tertiary);
}

.protection-check i {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--success-dark);
}

.protection-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.protection-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

/* Light green fill with dark green tick - like Paid badge style */
.protection-check {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--success-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0;
}

.protection-check svg {
  color: var(--success-dark);
}

/* ========================================
   Login & User Management Styles
   (Note: Main .login-screen styles are defined earlier)
   ======================================== */

.login-field label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.login-field input {
  width: 100%;
  padding: var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--bg-surface);
  transition: all var(--duration-normal);
}

.login-field input:focus {
  outline: none;
  border-color: var(--astrovia-blue);
  box-shadow: var(--focus-ring-md);
}

.login-error {
  background: var(--error-border);
  color: var(--error-dark);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  margin-bottom: 20px;
  text-align: center;
}