/*
 * XOS Main Stylesheet - Clean Sprint 11C-2
 * Accessibility + Responsive + Mobile Experience
 *
 * Design tokens in tokens.css.
 * Shared components in components.css.
 * Page-specific styles only.
 */

/* ===========================================================
   11A. SCREEN READER ONLY — Visually hidden but accessible
   =========================================================== */
.xos-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;
}

/* ===========================================================
   11B. CLS PREVENTION — Image placeholders
   =========================================================== */
img {
  aspect-ratio: attr(width) / attr(height);
  max-width: 100%;
  height: auto;
}
img[loading="lazy"] {
  background: var(--md-surface-variant, #e5e7eb);
}
.xos-detail-gallery img,
.xos-carousel-media img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}

/* ===========================================================
   11C. FOCUS RING — Keyboard navigation (global)
   =========================================================== */

:focus-visible {
  outline: 2px solid var(--md-primary, #2563eb);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}
.xos-btn:focus-visible,
.xos-input:focus-visible,
.xos-select:focus-visible,
.xos-checkbox input[type="checkbox"]:focus-visible + .xos-checkbox-mark,
.xos-radio input[type="radio"]:focus-visible + .xos-radio-dot,
.xos-switch input[type="checkbox"]:focus-visible + .xos-switch-track,
.hp-appbar-icon:focus-visible,
.hp-bottom-nav-item:focus-visible,
.hp-bottom-nav-fab:focus-visible,
.xos-fab:focus-visible,
.db-header-icon:focus-visible,
.db-action-card:focus-visible,
.xos-search-back:focus-visible,
.xos-search-clear:focus-visible {
  outline: 2px solid var(--md-primary, #2563eb);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}
.xos-skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: var(--z-tooltip, 800);
  padding: 8px 16px;
  background: var(--md-primary, #2563eb);
  color: #fff;
  border-radius: var(--radius-sm, 4px);
  font-size: var(--typescale-body-medium, 14px);
  font-weight: var(--weight-bold, 700);
  text-decoration: none;
  transition: top 200ms ease;
}
.xos-skip-link:focus {
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ===========================================================
   BASE — Reset, Body, Images
   =========================================================== */

html, body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}
html {
  overflow-y: scroll;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--font-sans);
  color: var(--text-dark);
  background-color: var(--bg-light);
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

img, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Touch-friendly minimum size for interactive elements */
@media (hover: none) and (pointer: coarse) {
  button, 
  a, 
  .hp-bottom-nav-item,
  .xos-btn,
  .btn-prev,
  .btn-next,
  .btn-publish,
  .listing-type-card,
  .xos-detail-action-btn,
  [data-ripple] {
    min-height: 48px;
  }
}

/* Ensure touch targets >= 48px (Material Design) */
button,
a,
[role="button"],
input[type="submit"],
input[type="button"],
.xos-btn,
.hp-bottom-nav-item,
.hp-appbar-icon,
.db-header-icon,
.xos-fab,
.xos-retry-btn,
.listing-action-btn,
.notification-action-btn {
  min-height: var(--touch-target-sm, 44px);
  min-width: var(--touch-target-sm, 44px);
}
.hp-bottom-nav-item {
  min-height: 48px;
  min-width: 48px;
}

/* ===========================================================
   XOS APP LAYOUT
   =========================================================== */

.xos-app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--md-surface-dim);
  position: relative;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

.xos-page-content {
  flex: 1;
  width: 100%;
  max-width: 100%;
  padding-top: var(--appbar-height);
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  padding-left: var(--spacing-page);
  padding-right: var(--spacing-page);
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  .xos-page-content {
    padding-left: var(--spacing-page-desktop);
    padding-right: var(--spacing-page-desktop);
    padding-bottom: var(--space-8, 16px);
    padding-top: var(--space-8, 16px);
    max-width: var(--container-desktop);
    margin: 0 auto;
  }
}
@media (min-width: 1024px) {
  .xos-page-content {
    max-width: var(--container-wide);
  }
}

/* ===========================================================
   ALERT BOXES
   =========================================================== */

.xos-alert {
  padding: 15px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 25px;
  font-weight: 500;
}
.xos-alert-success {
  background-color: #ecfdf5;
  border-left: 5px solid var(--secondary-color);
  color: #065f46;
}
.xos-alert-danger {
  background-color: #fef2f2;
  border-left: 5px solid #ef4444;
  color: #991b1b;
}

/* ===========================================================
   DETAIL PAGE
   =========================================================== */

.xos-detail-layout {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: 30px;
  margin-top: 30px;
}
@media (max-width: 900px) {
  .xos-detail-layout { grid-template-columns: 1fr; }
}
.xos-detail-main {
  background: white;
  padding: 30px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}
.xos-detail-title {
  margin-top: 0;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.3;
  color: #1e3a8a;
}
.xos-detail-route-card {
  background: var(--bg-light);
  padding: 20px;
  border-radius: var(--radius-sm);
  margin: 20px 0;
}
.xos-detail-route-card h4 { margin-top: 0; }
.xos-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
  margin-top: 20px;
}
.xos-detail-meta-box {
  background: white;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  text-align: center;
}
.xos-detail-meta-box strong {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
}
.xos-detail-meta-box span {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
}
.xos-detail-content {
  margin-top: 25px;
  font-size: 1rem;
  line-height: 1.6;
}
.xos-contact-panel {
  background: white;
  padding: 25px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  height: fit-content;
  position: sticky;
  top: 20px;
}
.xos-contact-panel h3 {
  margin-top: 0;
  font-size: 1.2rem;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 10px;
}
.xos-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  margin-bottom: 12px;
  cursor: pointer;
  box-sizing: border-box;
  min-height: 48px;
}
.xos-contact-btn.phone { background: var(--secondary-color); color: white; }
.xos-contact-btn.phone:hover { background: var(--secondary-hover); }
.xos-contact-btn.zalo { background: #0068ff; color: white; }
.xos-contact-btn.zalo:hover { background: #0056d6; }

/* ===========================================================
   DASHBOARD (Legacy, RC3.2)
   =========================================================== */

.dashboard-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}
.dashboard-page-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1e3a8a;
  margin-bottom: 25px;
}
.welcome-card {
  display: flex;
  gap: 25px;
  align-items: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: white;
  padding: 30px;
  border-radius: var(--radius-md);
  margin-bottom: 30px;
  box-shadow: var(--shadow-md);
}
.welcome-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.3);
  object-fit: cover;
}
.welcome-info h2 { margin: 0 0 8px 0; font-size: 1.4rem; font-weight: 700; }
.welcome-detail { margin: 4px 0; font-size: 0.9rem; opacity: 0.9; }
.membership-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.85rem;
}
.verification-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.85rem;
}
.verification-badge.status-active { background: #10b981; color: white; }
.verification-badge.status-unverified { background: #f59e0b; color: white; }
.verification-badge.status-rejected { background: #ef4444; color: white; }
.dashboard-section {
  background: white;
  border-radius: var(--radius-md);
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}
.dashboard-section h2 {
  margin: 0 0 20px 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e3a8a;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 10px;
}
.statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 15px;
}
.statistic-card {
  text-align: center;
  padding: 18px 12px;
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  transition: transform 0.2s ease;
}
.statistic-card:hover { transform: translateY(-2px); }
.statistic-number {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary-color);
}
.statistic-title { margin: 5px 0 0; font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.action-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  min-height: 48px;
}
.action-button:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.action-primary { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.action-primary:hover { background: var(--primary-hover); }
.action-disabled { opacity: 0.5; cursor: not-allowed; }
.action-disabled:hover {
  background: var(--bg-light);
  color: var(--text-dark);
  border-color: var(--border-color);
  transform: none;
  box-shadow: none;
}
.recent-listings-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.recent-listings-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.recent-listings-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-light);
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  border-bottom: 2px solid var(--border-color);
}
.recent-listings-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
.recent-listings-table tr:last-child td { border-bottom: none; }
.recent-listings-table a { color: var(--primary-color); text-decoration: none; font-weight: 500; }
.recent-listings-table a:hover { text-decoration: underline; }
.listing-type-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.listing-type-badge.type-passenger_request { background: #dbeafe; color: #1e40af; }
.listing-type-badge.type-cargo_request { background: #fef3c7; color: #92400e; }
.listing-type-badge.type-ride_offer { background: #d1fae5; color: #065f46; }
.listing-type-badge.type-cargo_offer { background: #f3e8ff; color: #6b21a8; }
.status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.status-badge.status-active { background: #d1fae5; color: #065f46; }
.status-badge.status-completed { background: #dbeafe; color: #1e40af; }
.status-badge.status-expired { background: #fef3c7; color: #92400e; }
.status-badge.status-draft { background: #f3f4f6; color: #6b7280; }
.view-all-link { display: inline-block; margin-top: 15px; color: var(--primary-color); font-weight: 600; text-decoration: none; }
.view-all-link:hover { text-decoration: underline; }
.no-data { color: var(--text-muted); font-style: italic; }

@media (max-width: 768px) {
  .welcome-card { flex-direction: column; text-align: center; padding: 20px; }
  .statistics-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-actions-grid { grid-template-columns: 1fr; }
  .recent-listings-table th, .recent-listings-table td { padding: 8px 6px; font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .statistics-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .statistic-card { padding: 12px 8px; }
  .statistic-number { font-size: 1.2rem; }
  .dashboard-section { padding: 15px; }
}

/* ===========================================================
   ACCOUNT / PROFILE
   =========================================================== */

.account-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.account-section {
  background: white;
  border-radius: var(--radius-md);
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}
.account-section h2 {
  margin: 0 0 20px 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e3a8a;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 10px;
}
.account-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.account-form .form-group { margin-bottom: 18px; }
.account-form label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--text-dark); }
.account-form input,
.account-form select,
.account-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.account-form input:focus,
.account-form select:focus,
.account-form textarea:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.account-form input[readonly] { background: var(--bg-light); cursor: not-allowed; }
.btn-save {
  width: 100%;
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s;
  min-height: 48px;
}
.btn-save:hover { background: var(--primary-hover); }
.btn-danger {
  background: #ef4444;
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 48px;
}
.btn-danger:hover { background: #dc2626; }
.account-message { padding: 12px 15px; border-radius: var(--radius-sm); margin-bottom: 20px; font-weight: 500; }
.account-message.success { background: #ecfdf5; border-left: 4px solid #10b981; color: #065f46; }
.account-message.error { background: #fef2f2; border-left: 4px solid #ef4444; color: #991b1b; }
@media (max-width: 768px) {
  .account-form .form-row { grid-template-columns: 1fr; }
}

/* ===========================================================
   WIZARD (Posting/Edit)
   =========================================================== */

.wizard-progress-wrapper { margin-bottom: 15px; }
.wizard-progress-bar {
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), #6366f1);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.wizard-step-indicator { text-align: center; font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.wizard-spinner {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.spinner-icon {
  width: 40px; height: 40px;
  border: 4px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: xos-spin 0.8s linear infinite;
}
.wizard-step-desc { color: var(--text-muted); margin: -15px 0 20px; font-size: 0.9rem; }

.listing-type-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
}
.listing-type-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-light);
  min-height: 48px;
}
.listing-type-card:hover {
  border-color: var(--primary-color);
  background: #eff6ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.12);
}
.listing-type-card.selected {
  border-color: var(--primary-color);
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.type-icon { font-size: 2.2rem; line-height: 1; }
.type-text h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.type-text p { margin: 0; font-size: 0.8rem; color: var(--text-muted); }

.wiz-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background: white;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.wiz-input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.wiz-input[readonly] { background: var(--bg-light); cursor: default; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.form-row-three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 768px) {
  .form-row-three { grid-template-columns: 1fr; }
}
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--text-dark); }

.wiz-suggestions {
  position: absolute;
  z-index: 100;
  background: white;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  max-height: 180px;
  overflow-y: auto;
  width: 100%;
  display: none;
  box-shadow: var(--shadow-md);
}
.wiz-map-preview {
  min-height: 200px;
  background: var(--bg-light);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-placeholder { color: var(--text-muted); font-size: 1rem; text-align: center; }
.preview-listing { padding: 0; }
.preview-header { margin-bottom: 20px; }
.preview-header h3 { margin: 10px 0 0; font-size: 1.2rem; color: var(--text-dark); }
.preview-section { margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.preview-section:last-child { border-bottom: none; }
.preview-section h4 { margin: 0 0 10px; font-size: 0.9rem; color: var(--primary-color); font-weight: 700; }
.preview-section p { margin: 0; font-size: 0.9rem; color: var(--text-dark); line-height: 1.5; }
.preview-item { display: flex; padding: 6px 0; font-size: 0.9rem; }
.preview-item strong { min-width: 100px; color: var(--text-muted); }
.preview-price { font-size: 1.2rem; font-weight: 700; color: var(--secondary-color); }
.publish-summary { text-align: center; padding: 30px 20px; }
.publish-icon { font-size: 3rem; margin-bottom: 15px; }
.publish-summary h4 { font-size: 1.3rem; margin: 0 0 10px; color: var(--text-dark); }
.publish-summary p { color: var(--text-muted); margin: 0 0 10px; }
.publish-limit { font-size: 0.85rem; color: var(--text-muted); }
.btn-next:disabled { opacity: 0.5; cursor: not-allowed; }
.wizard-actions { display: flex; gap: 12px; margin-top: 25px; }

.wizard-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.wizard-steps {
  display: flex;
  gap: 0;
  margin-bottom: 30px;
  background: white;
  border-radius: var(--radius-md);
  padding: 5px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  overflow-x: auto;
}
.wizard-step {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  position: relative;
}
.wizard-step.active { background: var(--primary-color); color: white; }
.wizard-step.completed { color: var(--secondary-color); }
.step-number {
  display: inline-block;
  width: 24px; height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background: var(--border-color);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 6px;
}
.wizard-step.active .step-number { background: rgba(255,255,255,0.3); }
.wizard-step.completed .step-number { background: var(--secondary-color); }
.wizard-form {
  background: white;
  border-radius: var(--radius-md);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}
.wizard-form h3 { margin: 0 0 25px; font-size: 1.3rem; color: #1e3a8a; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; }

.btn-prev {
  flex: 1;
  background: var(--bg-light);
  color: var(--text-dark);
  border: 1px solid var(--border-color);
  padding: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-next {
  flex: 2;
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 12px;
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-next:hover { background: var(--primary-hover); }
.btn-publish {
  flex: 2;
  background: var(--secondary-color);
  color: white;
  border: none;
  padding: 12px;
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-publish:hover { background: var(--secondary-hover); }

.preview-box {
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}
.preview-box h4 { margin: 0 0 15px; color: #1e3a8a; }
.form-section-divider {
  margin: 20px 0 15px 0;
  border-top: 1px solid var(--border-color);
  position: relative;
}
.form-section-divider span {
  display: inline-block;
  background: var(--bg-card);
  padding: 0 12px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary-color);
  position: relative;
  top: -10px;
  left: 10px;
}

@media (max-width: 768px) {
  .listing-type-options { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .listing-type-card { padding: 14px; }
  .type-icon { font-size: 1.8rem; }
  .wizard-steps { flex-wrap: nowrap; overflow-x: auto; gap: 2px; }
  .wizard-step { font-size: 0.65rem; padding: 8px 2px; min-width: 50px; }
  .step-label { display: none; }
  .wizard-form { padding: 18px 14px; }
  .wizard-actions { flex-direction: column; gap: 10px; }
  .btn-prev, .btn-next, .btn-publish { width: 100%; padding: 14px; min-height: 44px; font-size: 1rem; }
}
@media (max-width: 480px) {
  .wizard-step { min-width: 40px; font-size: 0.6rem; }
  .step-number { width: 20px; height: 20px; line-height: 20px; font-size: 0.65rem; }
}
@media (max-width: 414px) {
  .wizard-container { padding: 10px; }
  .wizard-form { padding: 14px 10px; }
  .wizard-form h3 { font-size: 1.1rem; margin: 0 0 16px; }
  .form-group { margin-bottom: 12px; }
  .form-group label { font-size: 0.85rem; }
  .wiz-input { padding: 10px 12px; font-size: 16px; }
  .listing-type-card { padding: 12px; gap: 10px; }
  .type-icon { font-size: 1.5rem; }
  .type-text h4 { font-size: 0.9rem; }
  .publish-summary { padding: 20px 10px; }
  .publish-icon { font-size: 2.2rem; }
  .publish-summary h4 { font-size: 1.1rem; }
  .btn-prev, .btn-next, .btn-publish { padding: 12px 10px; font-size: 0.95rem; }
}

/* ===========================================================
   MY LISTINGS
   =========================================================== */

.my-listings-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}
.listings-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}
.listings-filter-bar select,
.listings-filter-bar input {
  padding: 9px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  background: white;
  min-height: 44px;
}
.listings-filter-bar input { flex: 1; min-width: 150px; }
.listing-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.listing-card-info { flex: 1; }
.listing-card-info h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; }
.listing-card-info h3 a { color: var(--text-dark); text-decoration: none; }
.listing-card-info h3 a:hover { color: var(--primary-color); }
.listing-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.listing-card-meta span { display: flex; align-items: center; gap: 4px; }
.listing-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}
.listing-action-btn {
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: white;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
  transition: all 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.listing-action-btn:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.listing-action-btn.delete-btn:hover { background: #ef4444; border-color: #ef4444; }
.empty-listings { text-align: center; padding: 50px 20px; color: var(--text-muted); }
@media (max-width: 768px) {
  .listing-card { flex-direction: column; align-items: flex-start; }
  .listing-card-actions { width: 100%; justify-content: flex-start; }
  .listings-filter-bar { flex-direction: column; }
  .listings-filter-bar input { width: 100%; }
}

/* ===========================================================
   NOTIFICATIONS
   =========================================================== */

.notifications-container { max-width: 800px; margin: 0 auto; padding: 20px; }
.notification-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.notification-card {
  display: flex;
  gap: 15px;
  background: white;
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: background 0.2s;
  align-items: flex-start;
}
.notification-card.unread { background: #eff6ff; border-left: 4px solid var(--primary-color); }
.notification-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light);
  border-radius: 50%;
  flex-shrink: 0;
}
.notification-card.unread .notification-icon { background: #dbeafe; }
.notification-content { flex: 1; }
.notification-content h4 { margin: 0 0 4px; font-size: 0.95rem; font-weight: 700; }
.notification-content p { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-muted); }
.notification-time { font-size: 0.75rem; color: var(--text-muted); }
.notification-actions { display: flex; gap: 6px; flex-shrink: 0; }
.notification-action-btn {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.notification-action-btn:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); }
@media (max-width: 768px) {
  .notification-card { flex-direction: column; }
  .notification-actions { width: 100%; justify-content: flex-end; }
  .notification-actions-bar { flex-direction: column; align-items: stretch; }
}

/* ===========================================================
   HOMEPAGE (hp-* namespace) - App-First
   =========================================================== */

body.xos-body {
  background: var(--md-surface-dim);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* App Bar */
.hp-appbar {
  position: sticky;
  top: 0;
  z-index: var(--z-navbar, 300);
  background: var(--md-surface);
  box-shadow: var(--elevation-2);
}
.hp-appbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 var(--spacing-page, 10px);
}
.hp-appbar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
.hp-appbar-brand {
  font-size: var(--typescale-title-medium);
  font-weight: var(--weight-bold);
  color: var(--md-on-surface);
  letter-spacing: -0.02em;
}
.hp-appbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hp-appbar-icon {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--md-on-surface-variant);
  position: relative;
  transition: background var(--motion-hover);
  -webkit-tap-highlight-color: transparent;
}
.hp-appbar-icon:active { background: var(--md-surface-variant); }
.hp-notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--md-error);
  border-radius: var(--radius-full);
  border: 2px solid var(--md-surface);
}

/* Floating Search */
.hp-search {
  position: sticky;
  top: 52px;
  z-index: var(--z-sticky, 200);
  padding: var(--space-4) var(--spacing-page, 10px);
  padding-bottom: var(--space-6);
  background: var(--md-surface);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.hp-search-inner {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--md-surface-variant);
  border-radius: var(--radius-full);
  height: 46px;
  padding: 0 var(--space-8);
  transition: background var(--motion-hover), box-shadow var(--motion-focus);
}
.hp-search-inner.focused { background: var(--md-surface); box-shadow: 0 0 0 2px var(--md-primary); }
.hp-search-icon {
  flex-shrink: 0;
  color: var(--md-on-surface-variant);
  margin-right: var(--space-4);
}
.hp-search-input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-size: var(--typescale-body-medium);
  font-family: var(--font-sans);
  color: var(--md-on-surface);
  outline: none;
  min-width: 0;
}
.hp-search-input::placeholder { color: var(--md-on-surface-dim); }

/* Hero */
.hp-hero {
  position: relative;
  padding: var(--space-14) var(--spacing-page, 10px) var(--space-12);
  text-align: center;
  overflow: hidden;
  background: linear-gradient(160deg, var(--md-primary, #2563eb) 0%, #1e40af 60%, #1e3a8a 100%);
  border-radius: 0 0 var(--radius-xl, 24px) var(--radius-xl, 24px);
  margin: 0 calc(-1 * var(--spacing-page, 10px));
}
.hp-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hp-hero-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
}
.hp-hero-circle-1 {
  top: -80px; right: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  animation: hp-hero-float 8s ease-in-out infinite;
}
.hp-hero-circle-2 {
  bottom: -40px; left: -80px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  animation: hp-hero-float 12s ease-in-out infinite reverse;
}
.hp-hero-circle-3 {
  top: 40%; left: 20%;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(99,102,241,0.25) 0%, transparent 70%);
  animation: hp-hero-float 10s ease-in-out infinite 2s;
}
@keyframes hp-hero-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(15px, -20px) scale(1.05); }
}
.hp-hero-content { position: relative; z-index: 1; }
.hp-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: var(--space-6);
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-lg, 16px);
  backdrop-filter: blur(4px);
}
.hp-hero-title {
  margin: 0;
  font-size: var(--typescale-headline-medium);
  font-weight: var(--weight-bold);
  color: #ffffff;
  line-height: var(--leading-snug);
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.hp-hero-sub {
  margin: var(--space-3) 0 0;
  font-size: var(--typescale-body-medium);
  color: rgba(255,255,255,0.85);
  line-height: var(--leading-normal);
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.hp-hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-10);
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.hp-hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-size: var(--typescale-title-small, 14px);
  font-weight: var(--weight-bold, 700);
  text-decoration: none;
  transition: transform var(--motion-hover), box-shadow var(--motion-hover);
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}
.hp-hero-btn:active { transform: scale(0.96); }
.hp-hero-btn-primary {
  background: #ffffff;
  color: var(--md-primary, #2563eb);
  box-shadow: var(--elevation-3, 0 4px 12px rgba(0,0,0,0.15));
}
.hp-hero-btn-primary:hover { box-shadow: var(--elevation-4, 0 6px 16px rgba(0,0,0,0.2)); }
.hp-hero-btn-secondary {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(4px);
}
.hp-hero-btn-secondary:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); }
.hp-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding: var(--space-6) var(--space-8);
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-xl, 24px);
  backdrop-filter: blur(8px);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.hp-hero-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hp-hero-stat-value {
  display: block;
  font-size: var(--typescale-title-large, 18px);
  font-weight: var(--weight-bold, 700);
  color: #ffffff;
  line-height: 1.1;
}
.hp-hero-stat-label {
  display: block;
  font-size: var(--typescale-label-small, 10px);
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.hp-hero-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.hp-hero-skeleton { padding: var(--space-10) var(--space-8); text-align: center; }

/* Quick Actions */
.hp-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) var(--spacing-page, 10px) var(--space-6);
}
.hp-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-3);
  background: var(--md-surface);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: var(--elevation-2);
  transition: transform var(--motion-hover), box-shadow var(--motion-hover);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.hp-quick-action:active { transform: scale(0.95); }
.hp-quick-action-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hp-quick-action-label {
  font-size: var(--typescale-label-medium);
  font-weight: var(--weight-semibold);
  color: var(--md-on-surface);
  text-align: center;
  line-height: var(--leading-snug);
}
.hp-quick-action-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-4);
  background: var(--md-surface);
  border-radius: var(--radius-lg);
}

/* Services */
.hp-services {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 var(--spacing-page, 10px) var(--space-8);
}
.hp-services-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
}
.hp-service-card {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: var(--elevation-2);
  position: relative;
  overflow: hidden;
  transition: transform var(--motion-hover), box-shadow var(--motion-hover);
  -webkit-tap-highlight-color: transparent;
}
.hp-service-card:active { transform: scale(0.98); }
.hp-service-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-service-text { flex: 1; min-width: 0; }
.hp-service-title { margin: 0; font-size: var(--typescale-title-medium); font-weight: var(--weight-bold); color: var(--md-on-surface); }
.hp-service-desc { margin: var(--space-1) 0 0; font-size: var(--typescale-body-small); color: var(--md-on-surface-variant); line-height: var(--leading-normal); }
.hp-service-arrow { flex-shrink: 0; color: var(--md-on-surface-variant); opacity: 0.6; }
.hp-service-card-skeleton {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--md-surface);
  border-radius: var(--radius-lg);
}
.hp-section { padding: var(--space-6) 0; }
.hp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.hp-section-title {
  margin: 0;
  font-size: var(--typescale-headline-small);
  font-weight: var(--weight-bold);
  color: var(--md-on-surface);
}
.hp-section-link {
  font-size: var(--typescale-body-small);
  font-weight: var(--weight-semibold);
  color: var(--md-primary);
  text-decoration: none;
}

/* Listing Cards Grid */
.hp-listings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 480px) {
  .hp-listings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .hp-listings-grid { grid-template-columns: repeat(3, 1fr); }
}

.hp-card {
  background: var(--md-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 250ms cubic-bezier(0.2,0,0,1), transform 250ms cubic-bezier(0.2,0,0,1);
}
.hp-card.hp-card-visible { opacity: 1; transform: translateY(0); }
.hp-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }
.hp-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--md-surface-variant);
}
.hp-card-media img { width: 100%; height: 100%; object-fit: cover; }
.hp-card-media img:hover { transform: scale(1.05); }
.hp-card-media-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  min-height: 120px;
}
.hp-card-type-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-1) var(--space-4);
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: var(--typescale-label-small);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}
.hp-card-body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hp-card-title {
  margin: 0;
  font-size: var(--typescale-title-small);
  font-weight: var(--weight-bold);
  color: var(--md-on-surface);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-card-route { display: flex; align-items: center; gap: var(--space-2); font-size: var(--typescale-body-small); color: var(--md-on-surface-variant); }
.hp-card-route span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.hp-card-date { display: flex; align-items: center; gap: var(--space-2); font-size: var(--typescale-label-small); color: var(--md-on-surface-dim); }
.hp-card-price { font-size: var(--typescale-title-small); font-weight: var(--weight-bold); color: var(--md-primary); }
.hp-card-action {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 40px;
  height: 40px;
  border: none;
  background: var(--md-primary);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--elevation-3);
  transition: transform var(--motion-hover);
  z-index: 2;
}
.hp-card-action:active { transform: scale(0.9); }
.hp-card-skeleton { opacity: 1; transform: none; pointer-events: none; }

/* Carousel */
.hp-carousel {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) 0 var(--space-4);
  scrollbar-width: none;
}
.hp-carousel::-webkit-scrollbar { display: none; }
.hp-carousel-item { flex-shrink: 0; scroll-snap-align: start; width: 240px; }
.hp-carousel-card {
  display: block;
  background: var(--md-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 250ms cubic-bezier(0.2,0,0,1), transform 250ms cubic-bezier(0.2,0,0,1);
}
.hp-carousel-card.hp-card-visible { opacity: 1; transform: translateX(0); }
.hp-carousel-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--md-surface-variant);
}
.hp-carousel-media img { width: 100%; height: 100%; object-fit: cover; }
.hp-carousel-media-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  min-height: 120px;
}
.hp-carousel-body { padding: var(--space-5); }
.hp-carousel-title {
  margin: 0;
  font-size: var(--typescale-title-small);
  font-weight: var(--weight-bold);
  color: var(--md-on-surface);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-carousel-route { margin-top: var(--space-2); font-size: var(--typescale-body-small); color: var(--md-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-carousel-price { margin-top: var(--space-3); font-size: var(--typescale-title-small); font-weight: var(--weight-bold); color: var(--md-primary); }
.hp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-16) var(--space-10); text-align: center; }
.hp-empty-icon { font-size: 2.5rem; margin-bottom: var(--space-4); }
.hp-empty p { margin: 0; font-size: var(--typescale-body-medium); color: var(--md-on-surface-variant); }
.hp-skeleton-area { animation: xos-fade-in 300ms ease-out; }
.hp-bottom-spacer { height: 80px; }

/* Homepage Desktop */
@media (min-width: 1024px) {
  .hp-appbar { display: none; }
}

/* ===========================================================
   DASHBOARD (App-First) - db-* namespace
   =========================================================== */

.db-content { min-height: 100vh; background: var(--md-surface-dim, #f8fafc); }
.db-real { opacity: 0; }
.db-skeleton-area { padding: var(--spacing-page, 10px); }
.db-skeleton-header { display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-8); }
.db-skeleton-header-text { flex: 1; }
.db-skeleton-line { margin-bottom: var(--space-4); }
.db-skeleton-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.db-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 200);
  background: var(--md-surface);
  border-bottom: 1px solid var(--md-outline);
  padding: 0 var(--spacing-page, 10px);
}
.db-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  max-width: var(--container-desktop, 1100px);
  margin: 0 auto;
}
.db-header-left { display: flex; align-items: center; gap: var(--space-6); min-width: 0; }
.db-header-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; }
.db-header-greeting { display: flex; flex-direction: column; min-width: 0; }
.db-header-hello { font-size: var(--typescale-body-small, 12px); color: var(--md-on-surface-variant, #6b7280); }
.db-header-name {
  font-size: var(--typescale-title-medium, 16px);
  font-weight: var(--weight-bold, 700);
  color: var(--md-on-surface, #1f2937);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-header-right { display: flex; gap: var(--space-2); flex-shrink: 0; }
.db-header-icon {
  position: relative;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--md-on-surface-variant);
  text-decoration: none;
  transition: background var(--motion-duration-fast, 100ms);
}
.db-header-icon:active { background: var(--md-surface-variant); }
.db-badge-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--md-error, #ef4444);
  border: 2px solid var(--md-surface);
}

.db-welcome {
  margin: var(--space-6) var(--spacing-page, 10px);
  padding: 0;
  background: linear-gradient(145deg, var(--md-primary, #2563eb) 0%, #1e40af 50%, #1e3a8a 100%);
  border-radius: var(--radius-xl, 24px);
  color: var(--md-primary-on, #ffffff);
  position: relative;
  overflow: hidden;
  box-shadow: var(--elevation-3);
}
.db-welcome-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.db-welcome-orb-1 {
  top: -60px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: db-orb-float 10s ease-in-out infinite;
}
.db-welcome-orb-2 {
  bottom: -30px; left: -60px;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
  animation: db-orb-float 14s ease-in-out infinite reverse;
}
.db-welcome-orb-3 {
  top: 30%; right: 20%;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  animation: db-orb-float 8s ease-in-out infinite 3s;
}
@keyframes db-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10px, -15px) scale(1.03); }
}
.db-welcome-inner { padding: var(--space-10); position: relative; z-index: 1; }
.db-welcome-avatar { position: relative; display: inline-block; margin-bottom: var(--space-6); }
.db-welcome-avatar-ring {
  position: relative;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
  display: inline-block;
}
.db-welcome-avatar-ring img {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(255,255,255,0.3);
}
.db-welcome-verified {
  position: absolute;
  bottom: 0; right: -2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--md-primary);
}
.db-welcome-verified.status-active { background: var(--status-active, #10b981); }
.db-welcome-verified.status-unverified { background: var(--md-on-surface-variant, #6b7280); }
.db-welcome-verified.status-rejected { background: var(--md-error, #ef4444); }
/* Company Logo */
.db-welcome-company-logo {
  margin-bottom: var(--space-5);
  text-align: center;
}
.db-welcome-company-logo img {
  max-height: 80px;
  width: auto;
  border-radius: var(--radius-sm);
  object-fit: contain;
}
.db-welcome-company-logo .logo-placeholder {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 28px;
}
.db-welcome-greeting { margin-bottom: var(--space-3); }
.db-welcome-hello { font-size: var(--typescale-body-medium, 14px); color: rgba(255,255,255,0.8); font-weight: var(--weight-normal, 400); }
.db-welcome-info { margin-bottom: var(--space-8); position: relative; z-index: 1; }
.db-welcome-name { margin: 0 0 var(--space-3); font-size: var(--typescale-headline-medium, 22px); font-weight: var(--weight-bold, 700); color: inherit; line-height: 1.2; }
.db-welcome-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.db-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: var(--typescale-label-small, 11px);
  font-weight: var(--weight-semibold, 600);
  line-height: 1.6;
  white-space: nowrap;
}
.db-tag-membership { background: rgba(255,255,255,0.2); color: inherit; }
.db-tag-verify.status-active { background: rgba(16, 185, 129, 0.3); color: inherit; }
.db-tag-verify.status-unverified { background: rgba(255,255,255,0.15); color: inherit; }
.db-tag-verify.status-rejected { background: rgba(239, 68, 68, 0.3); color: inherit; }
.db-welcome-stats-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  position: relative;
  z-index: 1;
  padding: var(--space-6) var(--space-8);
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-lg, 16px);
  backdrop-filter: blur(8px);
}
.db-welcome-stat { display: flex; align-items: center; gap: var(--space-4); flex: 1; text-align: left; }
.db-welcome-stat-icon { width: 36px; height: 36px; border-radius: var(--radius-md, 10px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.db-stat-rep, .db-stat-posts, .db-stat-join { background: rgba(255,255,255,0.15); color: #fff; }
.db-welcome-stat-body { display: flex; flex-direction: column; min-width: 0; }
.db-welcome-stat-value { display: block; font-size: var(--typescale-title-large, 18px); font-weight: var(--weight-bold, 700); line-height: 1.2; color: inherit; }
.db-welcome-stat-label { display: block; font-size: var(--typescale-body-small, 11px); opacity: 0.8; line-height: 1.3; margin-top: 1px; }

.db-section {
  padding: 0 var(--spacing-page, 10px);
  margin-bottom: var(--space-6);
}
.db-section-header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6) 0; }
.db-section-title { margin: 0; font-size: var(--typescale-title-medium, 16px); font-weight: var(--weight-bold, 700); color: var(--md-on-surface, #1f2937); flex: 1; }
.db-section-link { font-size: var(--typescale-body-small, 12px); color: var(--md-primary); text-decoration: none; font-weight: var(--weight-semibold, 600); flex-shrink: 0; }
.db-section-badge { font-size: var(--typescale-label-small, 10px); color: var(--md-primary-on); background: var(--md-error); padding: 2px 8px; border-radius: var(--radius-full); font-weight: var(--weight-semibold, 600); white-space: nowrap; }

.db-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.db-stat-card {
  background: var(--md-surface);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-10);
  box-shadow: var(--elevation-2);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 250ms, transform 250ms, box-shadow var(--motion-hover);
}
.db-stat-card.db-card-visible { opacity: 1; transform: translateY(0); }
.db-stat-card:active { transform: scale(0.97); }
.db-stat-icon { width: 44px; height: 44px; border-radius: var(--radius-md, 12px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.db-stat-active .db-stat-icon { background: var(--state-success-bg, #ecfdf5); color: var(--state-success-text, #065f46); }
.db-stat-completed .db-stat-icon { background: var(--state-info-bg, #eff6ff); color: var(--state-info-text, #1e40af); }
.db-stat-views .db-stat-icon { background: var(--md-secondary-container, #d1fae5); color: var(--md-secondary-on-container, #065f46); }
.db-stat-expired .db-stat-icon { background: var(--state-warning-bg, #fffbeb); color: var(--state-warning-text, #92400e); }
.db-stat-body { flex: 1; min-width: 0; }
.db-stat-number { display: block; font-size: var(--typescale-headline-small, 18px); font-weight: var(--weight-bold, 700); color: var(--md-on-surface, #1f2937); line-height: 1.2; }
.db-stat-label { display: block; font-size: var(--typescale-body-small, 12px); color: var(--md-on-surface-variant, #6b7280); line-height: 1.3; margin-top: 2px; }

.db-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.db-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--md-surface);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-10) var(--space-4);
  box-shadow: var(--elevation-2);
  text-decoration: none;
  min-height: 80px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 250ms, transform 250ms, box-shadow var(--motion-hover);
  position: relative;
}
.db-action-card.db-card-visible { opacity: 1; transform: translateY(0); }
.db-action-card:active { transform: scale(0.95); }
.db-action-card.db-action-primary .db-action-icon { color: var(--md-primary); }
.db-action-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--md-on-surface-variant); }
.db-action-label { font-size: var(--typescale-body-small, 12px); font-weight: var(--weight-semibold, 600); color: var(--md-on-surface, #1f2937); text-align: center; line-height: 1.2; }
.db-action-badge {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--md-error);
  color: var(--md-primary-on);
  font-size: 10px;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-timeline { background: var(--md-surface); border-radius: var(--radius-md, 12px); box-shadow: var(--elevation-2); overflow: hidden; }
.db-timeline-item {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-10);
  border-bottom: 1px solid var(--md-outline);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 250ms, transform 250ms;
}
.db-timeline-item.db-card-visible { opacity: 1; transform: translateX(0); }
.db-timeline-item:last-child { border-bottom: none; }
.db-timeline-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: var(--md-surface-variant); }
.db-timeline-body { flex: 1; min-width: 0; }
.db-timeline-title { display: block; font-size: var(--typescale-body-medium, 14px); font-weight: var(--weight-semibold, 600); color: var(--md-on-surface, #1f2937); text-decoration: none; margin-bottom: 2px; line-height: 1.4; }
.db-timeline-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.db-timeline-type { font-size: var(--typescale-body-small, 12px); color: var(--md-on-surface-variant); }
.db-timeline-status { font-size: var(--typescale-label-small, 10px); font-weight: var(--weight-semibold, 600); padding: 1px 6px; border-radius: var(--radius-full); }
.db-timeline-status.status-active { background: var(--state-success-bg); color: var(--state-success-text); }
.db-timeline-status.status-draft, .db-timeline-status.status-expired { background: var(--state-warning-bg); color: var(--state-warning-text); }
.db-timeline-status.status-completed { background: var(--state-info-bg); color: var(--state-info-text); }
.db-timeline-date { font-size: var(--typescale-body-small, 12px); color: var(--md-on-surface-dim, #9ca3af); }

.db-perf-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
.db-perf-card {
  background: var(--md-surface);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-10);
  box-shadow: var(--elevation-2);
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 250ms, transform 250ms, box-shadow var(--motion-hover);
}
.db-perf-card.db-card-visible { opacity: 1; transform: translateY(0); }
.db-perf-card:active { transform: scale(0.97); }
.db-perf-icon { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.db-perf-views-icon { background: var(--state-info-bg); color: var(--state-info-text); }
.db-perf-contacts-icon { background: var(--state-success-bg); color: var(--state-success-text); }
.db-perf-rate-icon { background: var(--state-warning-bg); color: var(--state-warning-text); }
.db-perf-body { display: flex; flex-direction: column; gap: 2px; }
.db-perf-value { display: block; font-size: var(--typescale-headline-small, 18px); font-weight: var(--weight-bold, 700); color: var(--md-on-surface, #1f2937); line-height: 1.2; }
.db-perf-label { display: block; font-size: var(--typescale-body-small, 12px); color: var(--md-on-surface-variant, #6b7280); }

.db-bottom-spacer { height: 130px; }

@media (min-width: 768px) {
  .db-bottom-spacer { height: 0; }
}

/* ===========================================================
   DASHBOARD — Recommendation Cards (db-rec-*)
   =========================================================== */

.db-recommendation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .db-recommendation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.db-rec-card {
  display: block;
  background: var(--md-surface);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-6);
  box-shadow: var(--elevation-2);
  text-decoration: none;
  color: var(--md-on-surface);
  transition: box-shadow var(--motion-hover), transform var(--motion-hover);
  position: relative;
  overflow: hidden;
}

.db-rec-card:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .db-rec-card:hover {
    box-shadow: var(--elevation-4);
    transform: translateY(-2px);
  }
}

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

.db-rec-card-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--typescale-label-small, 10px);
  font-weight: var(--weight-semibold, 600);
  background: var(--md-primary-container, #dbeafe);
  color: var(--md-primary-on-container, #1e40af);
  line-height: 1.6;
  white-space: nowrap;
}

.db-rec-card-score {
  font-size: var(--typescale-label-medium, 12px);
  font-weight: var(--weight-bold, 700);
  color: var(--md-primary, #2563eb);
  white-space: nowrap;
}

.db-rec-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.db-rec-card-title {
  margin: 0;
  font-size: var(--typescale-body-medium, 14px);
  font-weight: var(--weight-bold, 700);
  color: var(--md-on-surface, #1f2937);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.db-rec-card-subtitle {
  margin: 0;
  font-size: var(--typescale-body-small, 12px);
  color: var(--md-on-surface-variant, #6b7280);
  line-height: var(--leading-normal);
}

.db-rec-card-reason {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--typescale-label-small, 11px);
  color: var(--md-on-surface-variant, #6b7280);
  line-height: var(--leading-normal);
}

.db-rec-card-reason svg {
  flex-shrink: 0;
  color: var(--md-on-surface-dim, #9ca3af);
}

/* Recommendation level accents */
.db-rec-level-high {
  border-left: 3px solid var(--md-primary, #2563eb);
}

.db-rec-level-medium {
  border-left: 3px solid var(--md-tertiary, #6366f1);
}

.db-rec-level-default {
  border-left: 3px solid var(--md-outline, #e5e7eb);
}

/* ===========================================================
   DASHBOARD — Notification List (db-notif-*)
   =========================================================== */

.db-notif-list {
  background: var(--md-surface);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--elevation-2);
  overflow: hidden;
}

.db-notif-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--md-outline);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 250ms, transform 250ms;
}

.db-notif-item.db-card-visible {
  opacity: 1;
  transform: translateY(0);
}

.db-notif-item:last-child {
  border-bottom: none;
}

.db-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--md-outline, #d1d5db);
  flex-shrink: 0;
}

.db-notif-unread .db-notif-dot {
  background: var(--md-primary, #2563eb);
}

.db-notif-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.db-notif-title {
  font-size: var(--typescale-body-medium, 14px);
  font-weight: var(--weight-semibold, 600);
  color: var(--md-on-surface, #1f2937);
  line-height: var(--leading-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-notif-msg {
  font-size: var(--typescale-body-small, 12px);
  color: var(--md-on-surface-variant, #6b7280);
  line-height: var(--leading-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-notif-time {
  font-size: var(--typescale-label-small, 10px);
  color: var(--md-on-surface-dim, #9ca3af);
}

.db-notif-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--md-error, #ef4444);
  flex-shrink: 0;
}

/* ===========================================================
   DASHBOARD — Empty State (db-empty)
   =========================================================== */

.db-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: var(--md-surface);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--elevation-2);
}

.db-empty-icon {
  font-size: 2rem;
  margin-bottom: var(--space-4);
  line-height: 1;
}

.db-empty p {
  margin: 0 0 var(--space-6);
  font-size: var(--typescale-body-medium, 14px);
  color: var(--md-on-surface-variant, #6b7280);
}

/* ===========================================================
   DASHBOARD — Statistics Grid Equal Heights
   =========================================================== */

.db-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

.db-stat-card {
  min-height: 80px;
  box-sizing: border-box;
}

/* ===========================================================
   DASHBOARD — Mobile Fixes for Horizontal Overflow
   =========================================================== */

.db-section,
.db-recommendation-grid,
.db-stats-grid,
.db-perf-grid,
.db-actions-grid,
.db-timeline,
.db-notif-list {
  max-width: 100%;
  box-sizing: border-box;
}

.db-welcome {
  box-sizing: border-box;
  max-width: 100%;
}

/* ===========================================================
   SPRINT 11A — FORM STYLING (Material Design 3)
   =========================================================== */

.xos-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  position: relative;
}
.xos-field-label {
  display: block;
  font-size: var(--typescale-body-medium);
  font-weight: var(--weight-medium);
  color: var(--md-on-surface);
  line-height: var(--leading-normal);
}
.xos-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-6);
  border: 1.5px solid var(--md-outline);
  border-radius: var(--radius-sm);
  background: var(--md-surface);
  font-size: var(--typescale-body-medium);
  font-family: var(--font-body);
  color: var(--md-on-surface);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--motion-duration-fast), box-shadow var(--motion-duration-fast);
  -webkit-appearance: none;
  appearance: none;
}
.xos-input::placeholder { color: var(--md-on-surface-dim); }
.xos-input:focus { border-color: var(--md-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.xos-input.error, .xos-input.xos-input-error { border-color: var(--md-error); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
.xos-input.success, .xos-input.xos-input-success { border-color: var(--status-active); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
.xos-input:disabled { background: var(--md-surface-variant); border-color: var(--md-outline-variant); color: var(--md-on-surface-dim); cursor: not-allowed; opacity: 0.7; }
textarea.xos-input { height: auto; min-height: 80px; padding: var(--space-6); resize: vertical; line-height: var(--leading-relaxed); }
.xos-field-helper { font-size: var(--typescale-body-small); color: var(--md-on-surface-variant); line-height: var(--leading-normal); }
.xos-field-error { font-size: var(--typescale-body-small); color: var(--md-error); line-height: var(--leading-normal); display: flex; align-items: center; gap: var(--space-2); }
.xos-field-success { font-size: var(--typescale-body-small); color: var(--status-active); line-height: var(--leading-normal); display: flex; align-items: center; gap: var(--space-2); }

.xos-select {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-6);
  padding-right: var(--space-12);
  border: 1.5px solid var(--md-outline);
  border-radius: var(--radius-sm);
  background: var(--md-surface);
  font-size: var(--typescale-body-medium);
  font-family: var(--font-body);
  color: var(--md-on-surface);
  outline: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color var(--motion-duration-fast), box-shadow var(--motion-duration-fast);
  -webkit-appearance: none;
  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='%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 14px center;
}
.xos-select:focus { border-color: var(--md-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.xos-select.error { border-color: var(--md-error); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
.xos-select:disabled { background: var(--md-surface-variant); border-color: var(--md-outline-variant); color: var(--md-on-surface-dim); cursor: not-allowed; opacity: 0.7; }

.xos-field-checkbox { display: flex; align-items: center; margin-bottom: var(--space-6); }
.xos-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  font-size: var(--typescale-body-medium);
  color: var(--md-on-surface);
  line-height: var(--leading-normal);
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.xos-checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.xos-checkbox-mark {
  width: 20px; height: 20px;
  border: 2px solid var(--md-outline);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--motion-duration-fast), border-color var(--motion-duration-fast);
}
.xos-checkbox input[type="checkbox"]:checked + .xos-checkbox-mark { background: var(--md-primary); border-color: var(--md-primary); }
.xos-checkbox input[type="checkbox"]:checked + .xos-checkbox-mark::after {
  content: '';
  width: 6px; height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}
.xos-checkbox input[type="checkbox"]:focus-visible + .xos-checkbox-mark { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.xos-checkbox input[type="checkbox"]:disabled + .xos-checkbox-mark { opacity: 0.5; cursor: not-allowed; }

.xos-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  font-size: var(--typescale-body-medium);
  color: var(--md-on-surface);
  line-height: var(--leading-normal);
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.xos-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.xos-radio-dot {
  width: 20px; height: 20px;
  border: 2px solid var(--md-outline);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--motion-duration-fast);
}
.xos-radio input[type="radio"]:checked + .xos-radio-dot { border-color: var(--md-primary); }
.xos-radio input[type="radio"]:checked + .xos-radio-dot::after {
  content: '';
  width: 10px; height: 10px;
  background: var(--md-primary);
  border-radius: 50%;
}
.xos-radio input[type="radio"]:focus-visible + .xos-radio-dot { outline: 2px solid var(--md-primary); outline-offset: 2px; }

.xos-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  font-size: var(--typescale-body-medium);
  color: var(--md-on-surface);
  line-height: var(--leading-normal);
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.xos-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.xos-switch-track {
  width: 40px; height: 24px;
  background: var(--md-outline);
  border-radius: 12px;
  position: relative;
  flex-shrink: 0;
  transition: background var(--motion-duration-normal);
}
.xos-switch-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--elevation-2);
  transition: transform var(--motion-duration-normal);
}
.xos-switch input[type="checkbox"]:checked + .xos-switch-track { background: var(--md-primary); }
.xos-switch input[type="checkbox"]:checked + .xos-switch-track::after { transform: translateX(16px); }

/* ===========================================================
   BOTTOM NAVIGATION (MD3)
   =========================================================== */

.hp-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 60px;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--md-surface, #fff);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08), 0 -4px 6px rgba(0,0,0,0.04);
  z-index: 900;
  padding: 0 8px;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hp-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--md-on-surface-variant, #6b7280);
  font-size: 10px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  min-height: 48px;
  min-width: 48px;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color var(--motion-duration-fast), background var(--motion-duration-fast);
}
.hp-bottom-nav-item svg { width: 24px; height: 24px; display: block; }
.hp-bottom-nav-item span { display: block; line-height: 1.2; font-size: 10px; font-weight: 500; }
.hp-bottom-nav-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--md-primary, #2563eb);
}
.hp-bottom-nav-item.active { color: var(--md-primary, #2563eb); font-weight: 700; }
.hp-bottom-nav-item[aria-current="page"] { color: var(--md-primary, #2563eb); font-weight: 700; }
.hp-bottom-nav-item[aria-current="page"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--md-primary, #2563eb);
}
.hp-bottom-nav-item:not(.active) { color: var(--md-on-surface-dim, #9ca3af); }
@media (hover: hover) {
  .hp-bottom-nav-item:hover { background: var(--md-surface-variant, #f3f4f6); }
}
.hp-bottom-nav-item:active { color: var(--md-primary, #2563eb); }

.hp-bottom-nav-fab {
  position: relative;
  top: -16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--md-primary, #2563eb);
  color: white;
  border: none;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35), 0 2px 4px rgba(37, 99, 235, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 48px;
  min-width: 48px;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  transition: transform var(--motion-duration-fast), box-shadow var(--motion-duration-fast);
}
.hp-bottom-nav-fab:active { transform: scale(0.92); }

/* ===========================================================
   EP12 BOTTOM NAVIGATION — Global (footer.php / bottom-nav.php)
   =========================================================== */

.ep12-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  height: 64px;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--md-surface, #ffffff);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08), 0 -4px 6px rgba(0,0,0,0.04);
  z-index: 900;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 100%;
  overflow-x: hidden;
}

.ep12-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--md-on-surface-variant, #6b7280);
  font-size: 10px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 8px;
  min-height: 48px;
  min-width: 48px;
  max-width: 72px;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color 100ms, background 100ms;
  box-sizing: border-box;
}

.ep12-nav-item svg,
.ep12-nav-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

.ep12-nav-label {
  display: block;
  line-height: 1.2;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep12-nav-item.active,
.ep12-nav-item[aria-current="page"] {
  color: var(--md-primary, #2563eb);
  font-weight: 700;
}

.ep12-nav-item.active::after,
.ep12-nav-item[aria-current="page"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--md-primary, #2563eb);
}

.ep12-nav-item:not(.active):not([aria-current="page"]) {
  color: var(--md-on-surface-dim, #9ca3af);
}

@media (hover: hover) {
  .ep12-nav-item:hover {
    background: var(--md-surface-variant, #f3f4f6);
  }
}

.ep12-nav-item:active {
  color: var(--md-primary, #2563eb);
}

/* Create (+) raised circle button */
.ep12-nav-create {
  position: relative;
}

.ep12-nav-create-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--md-primary, #2563eb);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35), 0 2px 4px rgba(37, 99, 235, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  transition: transform 100ms, box-shadow 100ms;
  margin-top: -20px;
}

.ep12-nav-create-circle:active {
  transform: scale(0.92);
}

.ep12-nav-create .ep12-nav-label {
  margin-top: 2px;
}

/* Notification badge */
.ep12-nav-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep12-nav-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--md-error, #ef4444);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  border: 2px solid var(--md-surface, #ffffff);
}

/* Hide bottom nav on desktop — already handled by hp-bottom-nav rule */
@media (min-width: 768px) {
  .ep12-bottom-nav {
    display: none;
  }
}

/* Compact adjustments for very small screens */
@media (max-width: 339px) {
  .ep12-nav-item {
    padding: 2px 4px;
    min-width: 36px;
    max-width: 56px;
  }
  .ep12-nav-item svg,
  .ep12-nav-icon {
    width: 20px;
    height: 20px;
  }
  .ep12-nav-label {
    font-size: 8px;
  }
  .ep12-nav-create-circle {
    width: 40px;
    height: 40px;
    margin-top: -16px;
  }
}

/* ===========================================================
   FLOATING ACTION BUTTON (FAB)
   =========================================================== */

.xos-fab {
  position: fixed;
  right: 16px;
  bottom: 80px;
  z-index: 1000;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--md-primary, #2563eb);
  color: var(--md-primary-on, #ffffff);
  border: none;
  box-shadow: var(--fab-elevation, 0 6px 16px rgba(37, 99, 235, 0.35));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  transition: transform var(--motion-duration-fast), box-shadow var(--motion-duration-normal), opacity var(--motion-duration-fast);
}
.xos-fab .fab-icon { font-size: 28px; font-weight: 300; line-height: 1; }
@media (hover: hover) {
  .xos-fab:hover { box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); transform: translateY(-1px); }
}
.xos-fab:active { transform: scale(0.92); box-shadow: var(--fab-elevation-pressed); }
.xos-fab.xos-fab-disabled, .xos-fab:disabled { opacity: 0.38; pointer-events: none; box-shadow: none; }
.xos-fab.xos-fab-loading { pointer-events: none; }
.xos-fab.xos-fab-loading .fab-icon { animation: xos-spin 0.8s linear infinite; }
.xos-fab.xos-fab-enter { animation: xos-fab-enter 300ms var(--motion-easing-emphasized) forwards; }
@keyframes xos-fab-enter {
  from { opacity: 0; transform: scale(0) translateY(40px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===========================================================
   SKELETON LOADING
   =========================================================== */

.xos-skeleton {
  background: var(--skeleton-bg);
  border-radius: var(--skeleton-radius);
  position: relative;
  overflow: hidden;
}
.xos-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--skeleton-shimmer);
  animation: xos-shimmer 1.5s infinite;
  transform: translateX(-100%);
}
.xos-skeleton-text { height: 14px; margin: 4px 0; }
.xos-skeleton-text-lg { height: 20px; }
.xos-skeleton-text-sm { height: 10px; }
.xos-skeleton-card { aspect-ratio: 16/9; }

.xos-skeleton-card-block { height: 180px; border-radius: var(--radius-md); margin-bottom: var(--space-6); }
.xos-skeleton-card-row { display: flex; gap: var(--space-6); margin-bottom: var(--space-6); }
.xos-skeleton-card-col { flex: 1; }
.xos-skeleton-list-item { display: flex; gap: var(--space-6); padding: var(--space-6) 0; border-bottom: 1px solid var(--md-outline); }
.xos-skeleton-list-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); flex-shrink: 0; }
.xos-skeleton-list-content { flex: 1; }
.xos-skeleton-list-line { height: 12px; margin-bottom: var(--space-3); border-radius: var(--radius-xs); }
.xos-skeleton-list-line-sm { width: 60%; }
.xos-skeleton-detail-header { height: 200px; border-radius: var(--radius-md); margin-bottom: var(--space-8); }
.xos-skeleton-detail-body { display: flex; flex-direction: column; gap: var(--space-4); }
.xos-skeleton-detail-line { height: 14px; border-radius: var(--radius-xs); }
.xos-skeleton-detail-line-lg { height: 24px; width: 70%; }
.xos-skeleton-dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
.xos-skeleton-dash-stat { height: 80px; border-radius: var(--radius-md); }
.xos-skeleton-dash-row { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); }
.xos-skeleton-dash-item { flex: 1; height: 72px; border-radius: var(--radius-md); }
.xos-skeleton-search-item { height: 72px; border-radius: var(--radius-sm); margin-bottom: var(--space-4); }

/* ===========================================================
   LOADING & PROGRESS
   =========================================================== */

.xos-spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--md-outline);
  border-top-color: var(--md-primary);
  border-radius: 50%;
  animation: xos-spin 0.8s linear infinite;
}
.xos-spinner-lg { width: 40px; height: 40px; border-width: 4px; }
.xos-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.xos-spinner-inline { display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--typescale-body-medium); color: var(--md-on-surface-variant); }

.xos-progress { width: 100%; height: 4px; background: var(--md-surface-variant); border-radius: 2px; overflow: hidden; position: relative; }
.xos-progress-fill { height: 100%; background: var(--md-primary); border-radius: 2px; transition: width var(--motion-duration-slow); }
.xos-progress-indeterminate .xos-progress-fill { width: 40%; animation: xos-progress-indeterminate 1.2s infinite; }
@keyframes xos-progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.xos-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-loading, 900);
  animation: xos-fade-in 200ms ease-out;
}
.xos-loading-overlay .xos-spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--md-outline);
  border-top-color: var(--md-primary);
}

/* ===========================================================
   EMPTY STATE
   =========================================================== */

.xos-empty, .xos-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-20) var(--space-10);
  text-align: center;
  min-height: 200px;
}
.xos-empty-icon, .xos-empty-icon {
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  background: var(--md-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: var(--space-6);
}
.xos-empty h3, .xos-empty-state h3 { margin: 0 0 var(--space-3); font-size: var(--typescale-headline-small); font-weight: var(--weight-bold); color: var(--md-on-surface); line-height: var(--leading-snug); }
.xos-empty p, .xos-empty-state p { margin: 0 0 var(--space-8); font-size: var(--typescale-body-medium); color: var(--md-on-surface-variant); max-width: 280px; line-height: var(--leading-relaxed); }
.xos-empty-card { background: var(--md-surface); border-radius: var(--radius-md); box-shadow: var(--elevation-2); }

/* ===========================================================
   MOTION — Fade, Slide, Scale, Hover, Press
   =========================================================== */

.xos-fade { transition: opacity 200ms var(--motion-easing-decelerate); }
.xos-fade-in { animation: xos-fade-in 200ms var(--motion-easing-decelerate) both; }
.xos-fade-out { animation: xos-fade-out 150ms var(--motion-easing-accelerate) both; }
@keyframes xos-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes xos-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.xos-slide-up { animation: xos-slide-up 200ms var(--motion-easing-standard) both; }
.xos-slide-down { animation: xos-slide-down 200ms var(--motion-easing-standard) both; }
@keyframes xos-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes xos-slide-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.xos-slide-in-left { animation: xos-slide-in-left 200ms var(--motion-easing-standard) both; }
@keyframes xos-slide-in-left {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}
.xos-slide-in-right { animation: xos-slide-in-right 200ms var(--motion-easing-standard) both; }
@keyframes xos-slide-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

.xos-scale-in { animation: xos-scale-in 200ms var(--motion-easing-standard) both; }
.xos-scale-out { animation: xos-scale-out 150ms var(--motion-easing-accelerate) both; }
@keyframes xos-scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes xos-scale-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.9); }
}

.xos-press { transition: transform 100ms var(--motion-easing-standard); }
.xos-press:active { transform: scale(0.97); }
.xos-press-hard:active { transform: scale(0.92); }

@media (hover: hover) {
  .xos-hover-lift { transition: transform 200ms, box-shadow 200ms; }
  .xos-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--elevation-4); }
}

/* Ripple */
[data-ripple] {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.xos-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.12;
  pointer-events: none;
  animation: xos-ripple-effect 600ms cubic-bezier(0.2, 0, 0, 1) forwards;
}
@keyframes xos-ripple-effect {
  from { transform: scale(0); opacity: 0.3; }
  to { transform: scale(4); opacity: 0; }
}

/* Stagger */
.xos-stagger > * {
  opacity: 0;
  animation: xos-fade-in 200ms var(--motion-easing-decelerate) both;
}
.xos-stagger > *:nth-child(1) { animation-delay: 0ms; }
.xos-stagger > *:nth-child(2) { animation-delay: 30ms; }
.xos-stagger > *:nth-child(3) { animation-delay: 60ms; }
.xos-stagger > *:nth-child(4) { animation-delay: 90ms; }
.xos-stagger > *:nth-child(5) { animation-delay: 120ms; }
.xos-stagger > *:nth-child(6) { animation-delay: 150ms; }
.xos-stagger > *:nth-child(7) { animation-delay: 180ms; }
.xos-stagger > *:nth-child(8) { animation-delay: 210ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .xos-ripple { display: none !important; }
  .xos-fab-enter { animation: none !important; }
}

/* ===========================================================
   RESPONSIVE — 320, 360, 375, 390, 414, 768, 1024
   =========================================================== */

/* 320px */
@media (max-width: 339px) {
  .xos-page-content { padding-left: var(--space-4, 8px); padding-right: var(--space-4, 8px); }
  .hp-appbar-inner { padding: 0 var(--space-4); height: 48px; }
  .hp-appbar-brand { display: none; }
  .hp-search { padding: var(--space-3) var(--space-4); }
  .hp-search-inner { height: 40px; }
  .hp-quick-actions { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .hp-quick-action { padding: var(--space-4) var(--space-2); border-radius: var(--radius-md); }
  .hp-quick-action-icon { width: 36px; height: 36px; }
  .hp-quick-action-label { font-size: 10px; }
  .hp-hero { padding: var(--space-7) 0 var(--space-6); }
  .hp-hero-title { font-size: var(--typescale-headline-small); }
  .hp-bottom-nav-item { padding: 4px 6px; min-height: 44px; min-width: 40px; }
  .hp-bottom-nav-item svg { width: 20px; height: 20px; }
  .hp-bottom-nav-item span { font-size: 8px; }
  .hp-bottom-nav-fab { width: 44px; height: 44px; top: -12px; }
  .xos-fab { width: 48px; height: 48px; right: 12px; bottom: 72px; }
  .xos-fab .fab-icon { font-size: 24px; }
  .db-welcome-inner { padding: var(--space-8); }
  .db-welcome-name { font-size: var(--typescale-title-large, 18px); }
  .db-welcome-avatar-ring img { width: 52px; height: 52px; }
  .db-stats-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .db-actions-grid { grid-template-columns: 1fr 1fr; }
  .db-actions-grid .db-action-card { min-height: 72px; padding: var(--space-8) var(--space-3); }
  .db-perf-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .xos-auth-form { margin: var(--space-4, 8px) auto; padding: var(--space-5, 10px); }
}

/* 360px */
@media (min-width: 340px) and (max-width: 374px) {
  .hp-quick-actions { gap: var(--space-3); }
  .hp-quick-actions { grid-template-columns: repeat(2, 1fr); }
  .db-welcome-stats-row { flex-direction: column; gap: var(--space-4); }
  .db-welcome-stat { display: flex; align-items: center; gap: var(--space-4); text-align: left; }
  .db-welcome-stat-value { min-width: 48px; }
  .db-actions-grid { grid-template-columns: 1fr 1fr; }
  .db-perf-grid { grid-template-columns: 1fr 1fr; }
  .db-perf-grid .db-perf-card:last-child { grid-column: 1 / -1; }
}

/* 375px */
@media (min-width: 375px) and (max-width: 389px) {
  .hp-quick-actions { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
  .db-actions-grid { grid-template-columns: 1fr 1fr; }
}

/* 390px */
@media (min-width: 390px) and (max-width: 413px) {
  .hp-quick-actions { gap: var(--space-4); }
  .db-actions-grid { grid-template-columns: 1fr 1fr; }
  .db-stats-grid { grid-template-columns: 1fr 1fr; }
  .db-perf-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* 414px */
@media (min-width: 414px) and (max-width: 479px) {
  .hp-quick-actions { gap: var(--space-5); }
  .xos-page-content { padding-left: var(--space-8, 16px); padding-right: var(--space-8, 16px); }
  .db-actions-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 480px+ */
@media (min-width: 480px) and (max-width: 767px) {
  .db-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .db-actions-grid { grid-template-columns: repeat(4, 1fr); }
  .db-perf-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 768px+ Tablet */
@media (min-width: 768px) {
  .hp-bottom-nav { display: none; }
  .xos-fab { display: none; }
  .xos-page-content { padding-left: var(--spacing-page-desktop, 20px); padding-right: var(--spacing-page-desktop, 20px); padding-bottom: var(--space-8, 16px); max-width: var(--container-desktop, 1100px); margin: 0 auto; }
  .hp-quick-actions { max-width: 600px; margin: 0 auto; gap: var(--space-6); }
  .hp-quick-action { padding: var(--space-8) var(--space-5); }
  .hp-hero-title { font-size: var(--typescale-display-small); }
  .hp-carousel-item { width: 280px; }
  .db-welcome { max-width: 600px; margin-left: auto; margin-right: auto; }
  .db-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .db-actions-grid { grid-template-columns: repeat(4, 1fr); max-width: 500px; margin: 0 auto; }
  .db-section { max-width: 700px; margin-left: auto; margin-right: auto; }
  .db-perf-grid { grid-template-columns: repeat(3, 1fr); max-width: 500px; margin: 0 auto; }
}

/* 1024px+ Desktop */
@media (min-width: 1024px) {
  .hp-appbar { display: none; }
  .hp-search { top: 0; }
  .hp-listings-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  .hp-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .hp-hero { padding: var(--space-16) 0 var(--space-10); }
  .hp-hero-title { font-size: var(--typescale-display-medium); }
  .hp-carousel-item { width: 300px; }
  .xos-page-content { max-width: var(--container-wide, 1200px); }
  .db-header { padding: 0 max(calc((100vw - 1100px) / 2), var(--spacing-page-desktop)); }
  .db-header-inner { max-width: 1100px; }
  .db-welcome { max-width: 700px; margin-left: auto; margin-right: auto; }
  .db-welcome-inner { padding: var(--space-12); }
  .db-section { max-width: 800px; }
  .db-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .db-actions-grid { grid-template-columns: repeat(4, 1fr); max-width: 500px; margin: 0 auto; }
  .db-perf-grid { grid-template-columns: repeat(3, 1fr); max-width: 500px; margin: 0 auto; }
  .db-stat-card:hover { box-shadow: var(--elevation-4); transform: translateY(-2px); }
  .db-action-card:hover { box-shadow: var(--elevation-4); transform: translateY(-2px); }
  .db-perf-card:hover { box-shadow: var(--elevation-4); transform: translateY(-2px); }
}

/* ===========================================================
   SEARCH OVERLAY & RESULTS
   =========================================================== */

.xos-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms, visibility 200ms;
}
.xos-search-overlay.open { opacity: 1; visibility: visible; }

.xos-search-full {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 850;
  background: var(--md-surface);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 250ms var(--motion-easing-emphasized);
}
.xos-search-full.open { transform: translateY(0); }

.xos-search-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}
.xos-search-back {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--md-on-surface);
}
.xos-search-input-wrap { flex: 1; position: relative; display: flex; align-items: center; }
.xos-search-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-10);
  border: none;
  border-radius: var(--radius-full);
  background: var(--md-surface-variant);
  font-size: 16px !important;
  color: var(--md-on-surface);
}
.xos-search-input::placeholder { color: var(--md-on-surface-variant); }
.xos-search-clear {
  position: absolute;
  right: 8px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--md-on-surface-variant);
  visibility: hidden;
}
.xos-search-clear.visible { visibility: visible; }

/* ===========================================================
   FILTER SHEET (Bottom Sheet style)
   =========================================================== */

.xos-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms;
}
.xos-filter-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 550;
  background: var(--md-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-6) var(--space-8) calc(env(safe-area-inset-bottom, 0px) + var(--space-8));
  transform: translateY(100%);
  transition: transform 250ms var(--motion-easing-emphasized);
  max-height: 80vh;
  overflow-y: auto;
}
.xos-filter-sheet.open { transform: translateY(0); }
.xos-filter-sheet-handle {
  width: 32px; height: 4px;
  background: var(--md-outline);
  border-radius: 2px;
  margin: 0 auto var(--space-6);
}
.xos-filter-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.xos-filter-sheet-header h3 { margin: 0; font-size: var(--typescale-title-medium); font-weight: var(--weight-bold); }
.xos-filter-sheet-header button {
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-on-surface-variant);
}
.xos-filter-group { margin-bottom: var(--space-6); }
.xos-filter-label { display: block; font-size: var(--typescale-body-small); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); color: var(--md-on-surface); }
.xos-filter-select {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-6);
  border: 1.5px solid var(--md-outline);
  border-radius: var(--radius-sm);
  background: var(--md-surface);
  font-size: var(--typescale-body-medium);
  color: var(--md-on-surface);
  box-sizing: border-box;
}
.xos-filter-actions { display: flex; gap: var(--space-4); margin-top: var(--space-8); }
.xos-filter-actions .xos-btn { flex: 1; min-height: 48px; }

/* ===========================================================
   BOTTOM SHEET (Global)
   =========================================================== */

.xos-bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms;
}
.xos-bottom-sheet-backdrop.open { opacity: 1; visibility: visible; }
.xos-bottom-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 550;
  background: var(--md-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-4) 0 calc(env(safe-area-inset-bottom, 0px) + var(--space-6));
  transform: translateY(100%);
  transition: transform 250ms var(--motion-easing-emphasized);
  max-height: 80vh;
  overflow-y: auto;
}
.xos-bottom-sheet-backdrop.open .xos-bottom-sheet { transform: translateY(0); }
.xos-bottom-sheet-handle {
  width: 32px; height: 4px;
  background: var(--md-outline);
  border-radius: 2px;
  margin: 0 auto var(--space-6);
}
.xos-bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8) var(--space-4);
  border-bottom: 1px solid var(--md-outline);
}
.xos-bottom-sheet-header h3 { margin: 0; font-size: var(--typescale-title-medium); font-weight: var(--weight-bold); }
.bs-close {
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-on-surface-variant);
}
.xos-bottom-sheet-content { padding: var(--space-6) var(--space-8); }
.xos-bottom-sheet-actions { padding: var(--space-4) var(--space-8); display: flex; gap: var(--space-4); }
.xos-bottom-sheet-actions .xos-btn { flex: 1; min-height: 48px; }

/* ===========================================================
   SNACKBAR
   =========================================================== */

.xos-snackbar-container {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-snackbar, 700);
  width: 90%;
  max-width: 400px;
}
#xos-snackbar {
  background: var(--snackbar-bg);
  color: var(--snackbar-color);
  padding: var(--snackbar-padding);
  border-radius: var(--snackbar-radius);
  box-shadow: var(--snackbar-elevation);
  font-size: var(--typescale-body-medium);
  font-weight: var(--weight-medium);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 200ms, transform 200ms;
}
#xos-snackbar.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================================
   STYLED BUTTONS
   =========================================================== */

.xos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-8);
  height: var(--btn-height, 48px);
  border-radius: var(--btn-radius, var(--radius-sm));
  font-size: var(--typescale-label-large);
  font-weight: var(--weight-bold);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background var(--motion-duration-fast), box-shadow var(--motion-duration-fast), transform var(--motion-duration-fast);
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  white-space: nowrap;
}
.xos-btn:active { transform: scale(0.97); }
.xos-btn-filled { background: var(--md-primary); color: white; }
.xos-btn-filled:hover { background: var(--md-primary-hover); }
.xos-btn-outlined {
  background: transparent;
  color: var(--md-primary);
  border: 1.5px solid var(--md-outline);
}
.xos-btn-outlined:hover { border-color: var(--md-primary); background: rgba(37,99,235,0.04); }

/* ===========================================================
   STANDARD PAGE (page.php)
   =========================================================== */

.xos-standard-page { padding: var(--spacing-page); max-width: 100%; margin: 0 auto; }
.xos-standard-page .xos-page-title { font-size: var(--typescale-headline-large); font-weight: var(--weight-bold); color: var(--md-primary); margin: 0 0 var(--space-8); line-height: var(--leading-snug); }
.xos-standard-page .xos-page-content-inner { background: var(--md-surface); padding: var(--spacing-card-padding); border-radius: var(--radius-md); box-shadow: var(--elevation-1); margin-bottom: var(--space-8); word-wrap: break-word; overflow-wrap: break-word; }
@media (min-width: 768px) {
  .xos-standard-page { max-width: var(--container-desktop); padding: var(--spacing-page-desktop); }
}
@media (min-width: 1024px) {
  .xos-standard-page { max-width: var(--container-wide); }
}
.xos-standard-page figure, .xos-standard-page .wp-block-image { max-width: 100%; margin: var(--space-8) 0; }
.xos-standard-page figure img, .xos-standard-page .wp-block-image img { height: auto; border-radius: var(--radius-sm); }

/* ===========================================================
    VEHICLE GALLERY (Sprint 11C.3 Module 3)
    =========================================================== */

.vehicle-gallery-section {
    margin: var(--space-6) 0;
}

.vehicle-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.vehicle-gallery-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--elevation-1);
    background: var(--md-surface-variant);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vehicle-gallery-item.featured {
    box-shadow: 0 0 0 3px var(--md-primary), var(--elevation-2);
}

.vehicle-gallery-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vehicle-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vehicle-gallery-item-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 2px;
    padding: var(--space-2);
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    justify-content: center;
}

.vehicle-gallery-item-actions button {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.9);
    color: var(--md-on-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    transition: background var(--motion-duration-fast), transform var(--motion-duration-fast);
    padding: 0;
    line-height: 1;
    min-height: 28px;
}

.vehicle-gallery-item-actions button:hover {
    background: #ffffff;
    transform: scale(1.1);
}

.vehicle-gallery-featured-btn {
    color: #f59e0b !important;
}

.vehicle-gallery-featured-btn.active {
    background: #f59e0b !important;
    color: white !important;
}

.vehicle-gallery-delete-btn:hover {
    background: var(--md-error) !important;
    color: white !important;
}

.vehicle-gallery-empty {
    grid-column: 1 / -1;
    padding: var(--space-10);
    text-align: center;
    color: var(--md-on-surface-variant);
    font-size: var(--typescale-body-medium);
    background: var(--md-surface-variant);
    border-radius: var(--radius-md);
    border: 2px dashed var(--md-outline);
}

.vehicle-gallery-file-input {
    display: none;
}

.vehicle-gallery-actions {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.vehicle-gallery-status {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-sm);
    font-size: var(--typescale-body-small);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-4);
    display: none;
}

.vehicle-gallery-status.success {
    background: var(--state-success-bg);
    color: var(--state-success-text);
    display: block;
}

.vehicle-gallery-status.error {
    background: var(--state-error-bg, #fef2f2);
    color: var(--state-error-text, #991b1b);
    display: block;
}

.vehicle-gallery-status.info {
    background: var(--state-info-bg, #eff6ff);
    color: var(--state-info-text, #1e40af);
    display: block;
}

.vehicle-gallery-status.warning {
    background: var(--state-warning-bg, #fffbeb);
    color: var(--state-warning-text, #92400e);
    display: block;
}

/* Featured Badge on gallery items */
.vehicle-gallery-featured-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    background: var(--md-primary);
    color: white;
    font-size: 10px;
    font-weight: var(--weight-bold);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    line-height: 1.4;
    z-index: 2;
}

/* Responsive gallery grid */
@media (min-width: 480px) {
    .vehicle-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (min-width: 768px) {
    .vehicle-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* ===========================================================
    MISC
    =========================================================== */

.xos-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16, 32px) var(--space-10, 20px);
  text-align: center;
}
.xos-error-icon { font-size: 2.5rem; margin-bottom: var(--space-6, 12px); }
.xos-error h3 { margin: 0 0 var(--space-3, 6px); font-size: var(--typescale-headline-small, 18px); color: var(--md-on-surface, #1f2937); }
.xos-error p { margin: 0 0 var(--space-8, 16px); font-size: var(--typescale-body-medium, 14px); color: var(--md-on-surface-variant, #6b7280); }
.xos-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 6px);
  padding: var(--space-4, 8px) var(--space-8, 16px);
  background: var(--md-primary, #2563eb);
  color: var(--md-primary-on, #ffffff);
  border: none;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--typescale-label-large, 14px);
  font-weight: var(--weight-semibold, 600);
  cursor: pointer;
  min-height: 44px;
}
.xos-retry-btn:active { transform: scale(0.97); }
.xos-detail-gallery { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: var(--space-4) 0; }
.xos-detail-gallery-item { flex: 0 0 auto; scroll-snap-align: start; width: 260px; max-width: 75vw; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--elevation-1); }
.xos-detail-gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

.pagination { display: flex; justify-content: center; gap: var(--space-2, 4px); padding: var(--space-4, 8px) 0; }
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-2, 4px);
  border-radius: var(--radius-sm, 6px);
  font-size: var(--typescale-body-medium, 14px);
  text-decoration: none;
  color: var(--md-on-surface, #1f2937);
  background: var(--md-surface, #fff);
  border: 1px solid var(--md-outline, #e5e7eb);
}
.pagination .current { background: var(--md-primary, #2563eb); color: white; border-color: var(--md-primary, #2563eb); }

/* ===========================================================
   MOBILE FIRST — Fixes for horizontal scroll & overlapping
   =========================================================== */
/* Prevent horizontal scroll on all viewports */
html, body, .xos-app-layout, .xos-page-content {
  overflow-x: hidden;
  max-width: 100%;
}
.xos-page-content > * {
  max-width: 100%;
  box-sizing: border-box;
}
.hp-hero {
  margin-left: calc(-1 * var(--spacing-page, 10px));
  margin-right: calc(-1 * var(--spacing-page, 10px));
  width: calc(100% + 2 * var(--spacing-page, 10px));
}
.hp-quick-actions,
.hp-services,
.hp-section,
.hp-listings-grid,
.db-section {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  .xos-snackbar-container {
    bottom: 76px;
    width: calc(100% - 32px);
    left: 16px;
    transform: none;
  }
}
@media (max-width: 339px) {
  .hp-bottom-nav-item { min-height: 44px; min-width: 40px; }
  .hp-bottom-nav-item span { font-size: 8px; }
  .hp-bottom-nav-fab { width: 44px; height: 44px; top: -12px; }
}
@media (max-width: 414px) {
  .hp-listings-grid { grid-template-columns: 1fr; }
  .hp-quick-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pagination a, .pagination span {
    min-width: 36px;
    height: 36px;
    font-size: var(--typescale-body-small, 12px);
  }
}

/* ===========================================================
   WHITE LABEL — Hide WordPress traces
   =========================================================== */

body:not(.xos-admin) #wpadminbar,
body:not(.xos-admin) .wpadminbar,
body:not(.xos-admin) .wp-toolbar,
body:not(.xos-admin) .ab-top-menu,
body:not(.xos-admin) .ab-item,
body:not(.xos-admin) #wp-admin-bar-root-default,
body:not(.xos-admin) #wp-admin-bar-top-secondary,
body:not(.xos-admin) #wp-admin-bar-wp-logo,
body:not(.xos-admin) #wp-admin-bar-edit,
body:not(.xos-admin) #wp-admin-bar-new-content,
body:not(.xos-admin) #wp-admin-bar-comments,
body:not(.xos-admin) #wp-admin-bar-customize,
body:not(.xos-admin) .ab-icon,
body:not(.xos-admin) .ab-label,
body:not(.xos-admin) .generator,
body:not(.xos-admin) meta[name="generator"],
body:not(.xos-admin) link[rel="https://api.w.org/"],
body:not(.xos-admin) link[rel="alternate"][type="application/json"],
body:not(.xos-admin) .wp-block-template-part,
body:not(.xos-admin) .wp-block-group,
body:not(.xos-admin) #adminmenumain,
body:not(.xos-admin) #adminmenu,
body:not(.xos-admin) #wpadminbar .ab-top-menu > li,
body:not(.xos-admin) .wp-submenu,
body:not(.xos-admin) .update-nag,
body:not(.xos-admin) #wpfooter,
body:not(.xos-admin) .comment-list,
body:not(.xos-admin) .comment-reply-title,
body:not(.xos-admin) .comment-form,
body:not(.xos-admin) #respond,
body:not(.xos-admin) #comments,
body:not(.xos-admin) #wp-admin-bar-site-name,
body:not(.xos-admin) #wp-admin-bar-view-site,
body:not(.xos-admin) #wp-admin-bar-dashboard,
body:not(.xos-admin) #wp-admin-bar-themes,
body:not(.xos-admin) #wp-admin-bar-plugins,
body:not(.xos-admin) #wp-admin-bar-users,
body:not(.xos-admin) #wp-admin-bar-settings,
body:not(.xos-admin) #wp-admin-bar-tools,
body:not(.xos-admin) #wp-admin-bar-appearance {
  display: none !important;
}

/* ===========================================================
   Sprint 11C.3 Module 3 — VEHICLE GALLERY
   =========================================================== */

/* Gallery Grid — Responsive 3-column grid */
.vehicle-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
  min-height: 80px;
}

/* Gallery Item — Individual image card */
.vehicle-gallery-item {
  position: relative;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--md-surface-variant, #e8e8e8);
  border: 1px solid var(--md-outline-variant, #d0d0d0);
  transition: border-color 0.2s ease;
}
.vehicle-gallery-item:hover {
  border-color: var(--md-primary, #2563eb);
}

/* Gallery Thumbnail — Image container with fixed aspect ratio */
.vehicle-gallery-thumb {
  aspect-ratio: 4/3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--md-surface-variant, #e0e0e0);
}
.vehicle-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gallery Empty State */
.vehicle-gallery-empty {
  grid-column: 1 / -1;
  padding: var(--space-8, 32px) var(--space-4, 16px);
  text-align: center;
  color: var(--md-on-surface-variant, #666);
  font-size: var(--typescale-body-medium, 14px);
  border: 2px dashed var(--md-outline-variant, #d0d0d0);
  border-radius: var(--radius-md, 8px);
  background: var(--md-surface, #fafafa);
}

/* Gallery Item Actions — Button row below thumbnail */
.vehicle-gallery-item-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px);
  background: var(--md-surface, #fff);
}
.vehicle-gallery-item-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--md-outline-variant, #d0d0d0);
  border-radius: var(--radius-sm, 4px);
  background: var(--md-surface, #fff);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--md-on-surface-variant, #555);
  transition: all 0.15s ease;
  padding: 0;
}
.vehicle-gallery-item-actions button:hover {
  background: var(--md-surface-variant, #e8e8e8);
  border-color: var(--md-outline, #999);
}

/* Featured Button */
.vehicle-gallery-featured-btn {
  color: var(--md-on-surface-variant, #555);
}
.vehicle-gallery-featured-btn:hover {
  color: #f59e0b;
  border-color: #f59e0b;
  background: #fffbeb;
}

/* Move Up / Move Down Buttons */
.vehicle-gallery-move-up:hover,
.vehicle-gallery-move-down:hover {
  color: var(--md-primary, #2563eb);
  border-color: var(--md-primary, #2563eb);
}

/* Replace Button */
.vehicle-gallery-replace-btn:hover {
  color: #0891b2;
  border-color: #0891b2;
  background: #ecfeff;
}

/* Delete Button */
.vehicle-gallery-delete-btn:hover {
  color: #dc2626;
  border-color: #dc2626;
  background: #fef2f2;
}

/* Gallery Actions Bar — Upload button row */
.vehicle-gallery-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
}

/* Hidden File Input */
.vehicle-gallery-file-input {
  display: none;
}

/* Gallery Status Messages */
.vehicle-gallery-status {
  padding: var(--space-3, 12px);
  margin-top: var(--space-3, 12px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--typescale-body-small, 13px);
  line-height: 1.4;
  display: none;
}
.vehicle-gallery-status.success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  display: block;
}
.vehicle-gallery-status.error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  display: block;
}
.vehicle-gallery-status.info {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  display: block;
}
.vehicle-gallery-status.warning {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  display: block;
}

/* ===========================================================
   Sprint 11C.3 Module 3 — LISTING DETAIL GALLERY
   =========================================================== */

/* Detail Gallery — Horizontal scroll-snap carousel */
.xos-detail-gallery {
  display: flex;
  gap: var(--space-2, 8px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2, 8px) 0;
  margin-bottom: var(--space-4, 16px);
  scrollbar-width: none;
}
.xos-detail-gallery::-webkit-scrollbar {
  display: none;
}

/* Detail Gallery Item */
.xos-detail-gallery-item {
  flex: 0 0 auto;
  width: 80%;
  max-width: 400px;
  scroll-snap-align: center;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--md-surface-variant, #e8e8e8);
}
.xos-detail-gallery-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* ===========================================================
   Sprint 11C.3 Module 3 — RESPONSIVE BREAKPOINTS
   =========================================================== */

/* Tablet: 2-column grid */
@media (max-width: 768px) {
  .vehicle-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .xos-detail-gallery-item {
    width: 85%;
    max-width: 350px;
  }
}

/* Mobile: single column, smaller buttons */
@media (max-width: 480px) {
  .vehicle-gallery-grid {
    grid-template-columns: 1fr;
  }
  .vehicle-gallery-item-actions {
    gap: var(--space-0, 2px);
  }
  .vehicle-gallery-item-actions button {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .xos-detail-gallery-item {
    width: 90%;
    max-width: 300px;
  }
}

/* ===========================================================
   END OF Sprint 11C-2
   =========================================================== */