/**
 * EXPOGEN Design System — Reusable UI Components
 *
 * All styles use CSS Custom Properties from tokens.css.
 * Changing theme = automatic visual update.
 *
 * Structure:
 *   1. Base / Reset
 *   2. Typography
 *   3. Buttons
 *   4. Cards
 *   5. Forms & Inputs
 *   6. Badges & Tags
 *   7. Alerts / Toasts
 *   8. Tables
 *   9. Modals
 *  10. Navigation (sidebar, breadcrumbs, tabs)
 *  11. Avatars
 *  12. Dividers
 *  13. Loaders
 *  14. Utilities
 *  ...
 *  75. Kanban Board (3 board types, columns, cards, drag states)
 *  76. Notification System (bell, dropdown, items, preferences)
 *  77. B2B Exchange (request/offer cards, responses, anonymous)
 *  78. B2B Service Marketplace (service cards, category groups, inquiry)
 *  79. AI Consultant (chat stream, brief card, form)
 *  80. Project Detail Panel (slide-out, status history, actions)
 *
 * @version 1.2.0
 */

/* Layer order is declared in head.php: @layer tailwind, base, components, layout, responsive, a11y; */

@layer base {
/* ================================================================
   1. BASE / RESET
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-accent-cyan);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-accent-pink);
}

::selection {
  background: rgba(var(--color-accent-cyan-rgb), 0.3);
  color: var(--color-text-primary);
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
} /* end @layer base */

@layer components {
/* ================================================================
   2. TYPOGRAPHY
   ================================================================ */
.text-display {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.text-heading {
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
}

.text-body {
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.text-caption {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.text-label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-primary);
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-accent-cyan), var(--color-accent-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   3. BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Primary — accent-cyan bg */
.btn-primary {
  background: var(--color-accent-cyan);
  color: var(--color-bg-primary);
  border-color: var(--color-accent-cyan);
}
.btn-primary:hover {
  box-shadow: var(--shadow-glow-cyan);
  filter: brightness(1.1);
  color: var(--color-bg-primary);
}

/* Secondary — outline */
.btn-secondary {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover {
  background: var(--color-bg-secondary);
  color: var(--color-accent-cyan);
  border-color: var(--color-accent-cyan);
}

/* Outline — alias for secondary */
.btn-outline {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border-strong);
}
.btn-outline:hover {
  background: var(--color-bg-secondary);
  color: var(--color-accent-cyan);
  border-color: var(--color-accent-cyan);
}

/* Ghost — no border */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

/* Danger */
.btn-danger {
  background: var(--color-error);
  color: var(--color-text-on-color, #ffffff);
  border-color: var(--color-error);
}
.btn-danger:hover {
  box-shadow: 0 0 20px rgba(var(--color-error-rgb), 0.5);
  filter: brightness(1.1);
  color: var(--color-text-on-color, #ffffff);
}

/* Glass */
.btn-glass {
  background: var(--glass-bg);
  color: var(--color-text-primary);
  border-color: var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover {
  background: rgba(var(--color-accent-cyan-rgb), 0.1);
  border-color: var(--color-accent-cyan);
  color: var(--color-accent-cyan);
}

/* Sizes */
.btn-xs {
  padding: 3px 8px;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.btn-sm {
  padding: 6px 14px;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
}
.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
  border-radius: var(--radius-lg);
}
.btn-xl {
  padding: 18px 36px;
  font-size: 1.125rem;
  border-radius: var(--radius-lg);
}

/* Icon-only */
.btn-icon {
  padding: 10px;
  border-radius: var(--radius-md);
}
.btn-icon.btn-sm { padding: 6px; }
.btn-icon.btn-lg { padding: 14px; }

/* Full width */
.btn-block {
  width: 100%;
}

/* ================================================================
   4. CARDS
   ================================================================ */
.card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}
.card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.card-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
  transition: all var(--transition-normal);
}
.card-glass:hover {
  border-color: rgba(var(--color-accent-cyan-rgb), 0.2);
  box-shadow: var(--shadow-glass), 0 0 30px rgba(var(--color-accent-cyan-rgb), 0.05);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.card-body {
  padding: 20px;
}

.card-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
}

.card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.card-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Interactive card */
.card-interactive {
  cursor: pointer;
}
.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.card-interactive:active {
  transform: translateY(0);
}

/* ================================================================
   5. FORMS & INPUTS
   ================================================================ */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.form-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.form-error {
  font-size: 0.75rem;
  color: var(--color-error);
  margin-top: 4px;
}

/* Text input, textarea, select */
.input {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}
.input::placeholder {
  color: var(--input-placeholder);
}
.input:hover {
  border-color: var(--color-border-strong);
}
.input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.input.input-error {
  border-color: var(--color-error);
}
.input.input-error:focus {
  box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.3);
}

/* Input sizes */
.input-sm {
  padding: 6px 10px;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
}
.input-lg {
  padding: 14px 18px;
  font-size: 1rem;
  border-radius: var(--radius-lg);
}

/* Textarea */
textarea.input {
  min-height: 100px;
  resize: vertical;
}

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--color-bg-tertiary);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent-cyan);
  cursor: pointer;
  margin-top: -6px;
  box-shadow: 0 0 8px rgba(0, 217, 255, 0.4);
  transition: box-shadow var(--transition-fast);
}
input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.6);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent-cyan);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 217, 255, 0.4);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--color-bg-tertiary);
}

/* Form layout helpers */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}

/* Select with custom arrow */
select.input {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23718096' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Checkbox & Radio */
.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.checkbox input,
.radio input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-accent-cyan);
  cursor: pointer;
}

/* Input group (icon + input) */
.input-group {
  position: relative;
}
.input-group .input {
  padding-left: 40px;
}
.input-group-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* ================================================================
   6. BADGES & TAGS
   ================================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-primary {
  background: rgba(var(--color-accent-cyan-rgb), 0.15);
  color: var(--color-accent-cyan);
}
.badge-success {
  background: rgba(var(--color-success-rgb), 0.15);
  color: var(--color-success);
}
.badge-warning {
  background: rgba(var(--color-warning-rgb), 0.15);
  color: var(--color-warning);
}
.badge-error {
  background: rgba(var(--color-error-rgb), 0.15);
  color: var(--color-error);
}
.badge-info {
  background: rgba(var(--color-info-rgb), 0.15);
  color: var(--color-info);
}
.badge-muted {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}
.badge-outline {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
}

/* Dot indicator in badge */
.badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Tag (removable badge) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}
.tag:hover {
  border-color: var(--color-accent-cyan);
  color: var(--color-accent-cyan);
}
.tag-remove {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}
.tag-remove:hover {
  opacity: 1;
}

/* ================================================================
   7. ALERTS / TOASTS
   ================================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.875rem;
  line-height: 1.5;
}
.alert svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-success {
  background: rgba(var(--color-success-rgb), 0.1);
  border-color: rgba(var(--color-success-rgb), 0.3);
  color: var(--color-success);
}
.alert-warning {
  background: rgba(var(--color-warning-rgb), 0.1);
  border-color: rgba(var(--color-warning-rgb), 0.3);
  color: var(--color-warning);
}
.alert-error {
  background: rgba(var(--color-error-rgb), 0.1);
  border-color: rgba(var(--color-error-rgb), 0.3);
  color: var(--color-error);
}
.alert-info {
  background: rgba(var(--color-info-rgb), 0.1);
  border-color: rgba(var(--color-info-rgb), 0.3);
  color: var(--color-info);
}

/* Toast (fixed position alert) */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  min-width: 320px;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  animation: toastSlideIn 0.3s ease-out;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   8. TABLES
   ================================================================ */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}
.table td {
  padding: 12px 16px;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}
.table tr:last-child td {
  border-bottom: none;
}
.table tbody tr {
  transition: background var(--transition-fast);
}
.table tbody tr:hover {
  background: var(--color-bg-secondary);
}

/* Striped */
.table-striped tbody tr:nth-child(even) {
  background: rgba(var(--color-bg-secondary-rgb), 0.5);
}

/* ================================================================
   9. MODALS
   ================================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
}

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

.modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  transition: all var(--transition-fast);
}
.modal-close:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}

/* Modal sizes */
.modal-sm { max-width: 380px; }
.modal-lg { max-width: 680px; }
.modal-xl { max-width: 900px; }

/* ================================================================
   10. NAVIGATION
   ================================================================ */

/* Sidebar */
.sidebar {
  width: 260px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  z-index: 100;
  transition: transform var(--transition-slow);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-nav {
  padding: 12px 8px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  text-decoration: none;
}
.sidebar-link:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.sidebar-link.active {
  background: rgba(var(--color-accent-cyan-rgb), 0.1);
  color: var(--color-accent-cyan);
}
.sidebar-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-section-title {
  padding: 8px 12px 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.breadcrumbs a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.breadcrumbs a:hover {
  color: var(--color-accent-cyan);
}
.breadcrumbs-separator {
  color: var(--color-text-muted);
  opacity: 0.5;
}
.breadcrumbs-current {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--color-border);
}

.tab {
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.tab:hover {
  color: var(--color-text-primary);
}
.tab.active {
  color: var(--color-accent-cyan);
  border-bottom-color: var(--color-accent-cyan);
}

/* ================================================================
   11. AVATARS
   ================================================================ */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-accent-cyan);
  flex-shrink: 0;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.125rem; }
.avatar-xl { width: 80px; height: 80px; font-size: 1.5rem; }

.avatar-group {
  display: flex;
}
.avatar-group .avatar {
  border: 2px solid var(--color-bg-primary);
  margin-left: -8px;
}
.avatar-group .avatar:first-child {
  margin-left: 0;
}

/* ================================================================
   12. DIVIDERS
   ================================================================ */
.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: 16px 0;
}

.divider-strong {
  background: var(--color-border-strong);
}

.divider-vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  background: var(--color-border);
}

/* ================================================================
   13. LOADERS
   ================================================================ */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent-cyan);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 40px; height: 40px; border-width: 4px; }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 25%,
    var(--color-bg-secondary) 50%,
    var(--color-bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}
.skeleton-title {
  height: 20px;
  width: 60%;
  margin-bottom: 12px;
}
.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.skeleton-card {
  height: 200px;
  border-radius: var(--radius-lg);
}

/* ================================================================
   14. UTILITIES
   ================================================================ */

/* Scrollbar styling (webkit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--color-bg-tertiary);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Truncate */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Status dots */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-online { background: var(--color-success); box-shadow: 0 0 6px rgba(var(--color-success-rgb), 0.5); }
.status-offline { background: var(--color-text-muted); }
.status-busy { background: var(--color-error); }
.status-away { background: var(--color-warning); }

/* Visually hidden (a11y) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ================================================================
   15. DROPDOWNS
   ================================================================ */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 500;
  min-width: 200px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--transition-fast);
}
.dropdown-menu.open,
.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu.right {
  left: auto;
  right: 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.dropdown-item:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.dropdown-item.active {
  background: rgba(var(--color-accent-cyan-rgb), 0.1);
  color: var(--color-accent-cyan);
}
.dropdown-item.danger {
  color: var(--color-error);
}
.dropdown-item.danger:hover {
  background: rgba(var(--color-error-rgb), 0.1);
}
.dropdown-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

.dropdown-header {
  padding: 6px 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* ================================================================
   16. ACCORDION / FAQ
   ================================================================ */
.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--color-border);
}
.accordion-item:last-child {
  border-bottom: none;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}
.accordion-trigger:hover {
  background: var(--color-bg-tertiary);
}

.accordion-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-normal);
}
.accordion-item.open .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal), padding var(--transition-normal);
  background: var(--color-bg-primary);
}
.accordion-item.open .accordion-content {
  padding: 16px 20px;
  max-height: 500px;
}

.accordion-content p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ================================================================
   16b. BLOG CARDS
   ================================================================ */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  text-decoration: none;
  color: inherit;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent-cyan);
}

.blog-card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  background: var(--color-bg-tertiary);
}
.blog-card-image--placeholder {
  height: 180px;
  background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 2rem;
}

.blog-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.blog-card-title {
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.blog-card-excerpt {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  flex: 1;
}

/* ================================================================
   16c. LANDING PAGE CONTENT (inner pages with fixed nav)
   ================================================================ */

.landing-page-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 24px 60px;
}
.landing-page-content--narrow {
  max-width: 750px;
}

/* ================================================================
   17. CHAT / MESSAGING
   ================================================================ */

/* Chat layout */
.chat-container {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* Conversation sidebar list */
.chat-sidebar {
  width: 340px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
}

.chat-sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.chat-sidebar-search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}

.chat-conversation-list {
  flex: 1;
  overflow-y: auto;
}

.chat-conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--color-border);
}
.chat-conversation-item:hover {
  background: var(--color-bg-tertiary);
}
.chat-conversation-item.active {
  background: rgba(var(--color-accent-cyan-rgb), 0.08);
  border-left: 3px solid var(--color-accent-cyan);
}
.chat-conversation-item.unread {
  background: rgba(var(--color-accent-cyan-rgb), 0.04);
}

.chat-conversation-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.chat-conversation-preview {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-conversation-time {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.chat-conversation-unread-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--color-accent-cyan);
  color: var(--color-bg-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Chat main area */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-bg-primary);
}

/* Messages area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Individual message */
.chat-message {
  display: flex;
  gap: 10px;
  max-width: 70%;
  animation: messageAppear 0.2s ease-out;
}
@keyframes messageAppear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-message.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-message.received {
  align-self: flex-start;
}

.chat-bubble {
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  line-height: 1.5;
  position: relative;
}

.chat-message.sent .chat-bubble {
  background: var(--color-accent-cyan);
  color: var(--color-bg-primary);
  border-bottom-right-radius: 4px;
}
.chat-message.received .chat-bubble {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
}

.chat-bubble-time {
  font-size: 0.6875rem;
  opacity: 0.7;
  margin-top: 4px;
  text-align: right;
}

/* Chat message with attachment */
.chat-attachment {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 6px;
  max-width: 280px;
}
.chat-attachment img {
  width: 100%;
  display: block;
  border-radius: var(--radius-md);
}

/* Date separator in chat */
.chat-date-separator {
  text-align: center;
  padding: 16px 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  position: relative;
}
.chat-date-separator::before,
.chat-date-separator::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 60px);
  height: 1px;
  background: var(--color-border);
}
.chat-date-separator::before { left: 0; }
.chat-date-separator::after { right: 0; }

/* Message composer */
.chat-composer {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--color-bg-primary);
}
.chat-composer-input {
  flex: 1;
  min-height: 42px;
  max-height: 140px;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-lg);
  resize: none;
  line-height: 1.4;
  transition: border-color var(--transition-fast);
}
.chat-composer-input:focus {
  outline: none;
  border-color: var(--input-border-focus);
}
.chat-composer-send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-accent-cyan);
  color: var(--color-bg-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.chat-composer-send:hover {
  box-shadow: var(--shadow-glow-cyan);
}
.chat-composer-send svg {
  width: 20px;
  height: 20px;
}

/* Typing indicator */
.chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.chat-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
  display: inline-block;
  animation: typingDot 1.4s ease-in-out infinite;
}
.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* Empty chat state */
.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 40px;
}
.chat-empty svg {
  width: 64px;
  height: 64px;
  opacity: 0.3;
}

/* ================================================================
   18. COMMENTS
   ================================================================ */
.comment {
  display: flex;
  gap: 12px;
  padding: 16px 0;
}
.comment + .comment {
  border-top: 1px solid var(--color-border);
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.comment-author {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.comment-date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.comment-text {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.comment-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
  background: none;
  border: none;
  padding: 0;
}
.comment-action:hover {
  color: var(--color-accent-cyan);
}
.comment-action svg {
  width: 14px;
  height: 14px;
}

/* Nested replies */
.comment-replies {
  margin-left: 52px;
  border-left: 2px solid var(--color-border);
  padding-left: 16px;
  margin-top: 8px;
}

/* ================================================================
   19. RATINGS / STARS
   ================================================================ */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.rating-star {
  width: 20px;
  height: 20px;
  color: var(--color-bg-tertiary);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.rating-star.filled {
  color: var(--color-warning);
}
.rating-star.half {
  position: relative;
  color: var(--color-bg-tertiary);
}
.rating-star:hover {
  transform: scale(1.15);
}

.rating-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-left: 6px;
}

.rating-count {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-left: 4px;
}

/* Rating display (read-only) */
.rating-display {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.rating-display .rating-star {
  cursor: default;
}
.rating-display .rating-star:hover {
  transform: none;
}

/* Rating bar (histogram) */
.rating-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
}
.rating-bar-label {
  width: 20px;
  text-align: right;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.rating-bar-track {
  flex: 1;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}
.rating-bar-fill {
  height: 100%;
  background: var(--color-warning);
  border-radius: 4px;
  transition: width var(--transition-slow);
}
.rating-bar-count {
  width: 30px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ================================================================
   20. PAGINATION
   ================================================================ */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-item {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
  border: none;
  text-decoration: none;
}
.pagination-item:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.pagination-item.active {
  background: var(--color-accent-cyan);
  color: var(--color-bg-primary);
}
.pagination-item:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ================================================================
   21. TOOLTIPS
   ================================================================ */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all var(--transition-fast);
  z-index: 9000;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ================================================================
   22. PROGRESS BARS
   ================================================================ */
.progress {
  width: 100%;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-cyan), var(--color-accent-purple));
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}
.progress-bar-success { background: var(--color-success); }
.progress-bar-warning { background: var(--color-warning); }
.progress-bar-error { background: var(--color-error); }

.progress-sm { height: 4px; }
.progress-lg { height: 12px; }

/* ================================================================
   23. EMPTY STATES
   ================================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  gap: 16px;
}
.empty-state-icon {
  width: 80px;
  height: 80px;
  color: var(--color-text-muted);
  opacity: 0.3;
}
.empty-state-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.empty-state-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  max-width: 400px;
}

/* ================================================================
   24. NOTIFICATION BELL / COUNTER
   ================================================================ */
.notification-badge {
  position: relative;
}
.notification-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-error);
  color: var(--color-text-on-color, #ffffff);
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg-primary);
}

/* ================================================================
   25. TENDER CARD (project-specific)
   ================================================================ */
.tender-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all var(--transition-normal);
}
.tender-card:hover {
  border-color: rgba(var(--color-accent-cyan-rgb), 0.3);
  box-shadow: var(--shadow-md);
}

.tender-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.tender-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.tender-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.tender-card-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tender-card-meta-item svg {
  width: 16px;
  height: 16px;
}

.tender-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.tender-budget {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-accent-cyan);
}

.tender-bids-count {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ================================================================
   26. PROFESSIONAL CARD (marketplace)
   ================================================================ */
.pro-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}
.pro-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-accent-cyan-rgb), 0.3);
}

.pro-card-cover {
  height: 120px;
  background: linear-gradient(135deg, var(--gradient-hero-start), var(--gradient-hero-end));
  position: relative;
}

.pro-card-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--color-bg-secondary);
  position: absolute;
  bottom: -36px;
  left: 20px;
  background: var(--color-bg-tertiary);
  overflow: hidden;
}
.pro-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pro-card-body {
  padding: 44px 20px 20px;
}

.pro-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pro-card-verified {
  width: 16px;
  height: 16px;
  color: var(--color-accent-cyan);
}

.pro-card-role {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.pro-card-stats {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 0.8125rem;
}
.pro-card-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
}
.pro-card-stat-value {
  font-weight: 700;
  color: var(--color-text-primary);
}

.pro-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* ================================================================
   27. ESCROW STATUS
   ================================================================ */
.escrow-status {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
}

.escrow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  flex: 1;
}
.escrow-step::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background: var(--color-border);
}
.escrow-step:last-child::after {
  display: none;
}
.escrow-step.completed::after {
  background: var(--color-success);
}
.escrow-step.active::after {
  background: linear-gradient(90deg, var(--color-accent-cyan), var(--color-border));
}

.escrow-step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 1;
  transition: all var(--transition-normal);
}
.escrow-step.completed .escrow-step-icon {
  background: var(--color-success);
  color: var(--color-text-on-color, #ffffff);
}
.escrow-step.active .escrow-step-icon {
  background: var(--color-accent-cyan);
  color: var(--color-bg-primary);
  box-shadow: 0 0 12px rgba(var(--color-accent-cyan-rgb), 0.4);
}

.escrow-step-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
}
.escrow-step.completed .escrow-step-label,
.escrow-step.active .escrow-step-label {
  color: var(--color-text-primary);
}

/* ================================================================
   28. INLINE CHAT (1-on-1 in tender / profile context)
   ================================================================ */
.inline-chat {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 400px;
  background: var(--color-bg-secondary);
}
.inline-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}
.inline-chat-header-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}
.inline-chat-header-status {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.inline-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Inline chat bubble variants: outgoing (right, accent) / incoming (left, muted) */
.inline-chat-messages .chat-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  line-height: 1.5;
  position: relative;
}
.inline-chat-messages .chat-bubble.outgoing {
  align-self: flex-end;
  background: var(--color-accent-cyan);
  color: var(--color-bg-primary);
  border-bottom-right-radius: 4px;
}
.inline-chat-messages .chat-bubble.incoming {
  align-self: flex-start;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
}
.inline-chat-messages .chat-bubble .chat-bubble-text {
  margin-bottom: 4px;
}
.inline-chat-messages .chat-bubble.outgoing .chat-file {
  border-color: rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.15);
}
.inline-chat-messages .chat-bubble.outgoing .chat-file-icon {
  background: rgba(0,0,0,0.25);
  color: #fff;
}
.inline-chat-messages .chat-bubble.outgoing .chat-file-name {
  color: #fff;
}
.inline-chat-messages .chat-bubble.outgoing .chat-file-meta {
  color: rgba(255,255,255,0.7);
}
/* Incoming bubble file — ensure contrast on dark bg */
.inline-chat-messages .chat-bubble.incoming .chat-file {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-strong);
}
.inline-chat-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}
.inline-chat-composer input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  color: var(--color-text-primary);
  font-size: 0.8125rem;
  outline: none;
}
.inline-chat-composer input:focus {
  border-color: var(--input-border-focus);
}

/* ================================================================
   29. CHAT ATTACHMENTS (file types in messages)
   ================================================================ */
.chat-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.08);
  border: 1px solid var(--color-border);
  max-width: 280px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.chat-file:hover {
  background: rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.14);
}
.chat-file-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.chat-file-icon.pdf { background: rgba(var(--color-error-rgb), 0.15); color: var(--color-error); }
.chat-file-icon.doc { background: rgba(var(--color-info-rgb), 0.15); color: var(--color-info); }
.chat-file-icon.zip { background: rgba(var(--color-warning-rgb), 0.15); color: var(--color-warning); }
.chat-file-icon.img { background: rgba(var(--color-success-rgb), 0.15); color: var(--color-success); }
.chat-file-icon.video { background: rgba(var(--color-accent-purple-rgb), 0.15); color: var(--color-accent-purple); }
.chat-file-info {
  flex: 1;
  min-width: 0;
}
.chat-file-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-file-meta {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}
.chat-image-preview {
  max-width: 240px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}
.chat-image-preview img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-normal);
}
.chat-image-preview:hover img {
  transform: scale(1.03);
}

/* ================================================================
   30. MEDIA GALLERY (chat attachments tab)
   ================================================================ */
.media-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.media-gallery-item {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-fast);
}
.media-gallery-item:hover {
  border-color: var(--color-accent-cyan);
}
.media-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.media-gallery-item:hover .media-gallery-item-overlay {
  opacity: 1;
}
.media-gallery-file {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.media-gallery-file:hover {
  border-color: var(--color-accent-cyan);
}
.media-gallery-file-icon {
  font-size: 1.5rem;
  font-weight: 700;
}
.media-gallery-file-name {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.media-gallery-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.media-gallery-tab {
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.media-gallery-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}
.media-gallery-tab.active {
  color: var(--color-accent-cyan);
  background: rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.1);
}

/* ================================================================
   31. NOTIFICATION DROPDOWN
   ================================================================ */
.notification-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  z-index: 100;
  width: 360px;
  max-height: 440px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  /* Hidden by default — shown via .open class (CSS-first, no Alpine dependency) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
}
.notification-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.notification-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}
.notification-dropdown-header h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.notification-dropdown-list {
  flex: 1;
  overflow-y: auto;
}
.notification-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.notification-item:hover {
  background: var(--color-bg-tertiary);
}
.notification-item.unread {
  background: rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.05);
}
.notification-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
}
.notification-item-icon.success { background: rgba(var(--color-success-rgb), 0.15); color: var(--color-success); }
.notification-item-icon.info { background: rgba(var(--color-info-rgb), 0.15); color: var(--color-info); }
.notification-item-icon.warning { background: rgba(var(--color-warning-rgb), 0.15); color: var(--color-warning); }
.notification-item-icon.error { background: rgba(var(--color-error-rgb), 0.15); color: var(--color-error); }
.notification-item-body {
  flex: 1;
  min-width: 0;
}
.notification-item-text {
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  line-height: 1.4;
}
.notification-item-time {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.notification-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-cyan);
  flex-shrink: 0;
  margin-top: 6px;
}
.notification-dropdown-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.notification-dropdown-footer a {
  font-size: 0.8125rem;
  color: var(--color-accent-cyan);
  text-decoration: none;
  font-weight: 500;
}

/* ================================================================
   32. PROFILE HEADER
   ================================================================ */
.profile-header {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}
.profile-cover {
  height: 180px;
  background: linear-gradient(135deg, var(--gradient-hero-start), var(--gradient-hero-end));
  position: relative;
}
.profile-info {
  padding: 0 24px 24px;
  display: flex;
  gap: 20px;
  align-items: flex-end;
  margin-top: -44px;
  position: relative;
  z-index: 1;
}
.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--color-bg-secondary);
  background: var(--color-bg-tertiary);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-accent-cyan);
}
.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-details {
  flex: 1;
  padding-top: 48px;
  padding-bottom: 4px;
}
.profile-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-role {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.profile-stats {
  display: flex;
  gap: 24px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}
.profile-stat {
  text-align: center;
}
.profile-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.profile-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.profile-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  padding-bottom: 4px;
}

/* ================================================================
   33. PORTFOLIO GRID
   ================================================================ */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.portfolio-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-normal);
}
.portfolio-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.3);
}
.portfolio-item-image {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--color-bg-tertiary);
}
.portfolio-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}
.portfolio-item:hover .portfolio-item-image img {
  transform: scale(1.05);
}
.portfolio-item-body {
  padding: 14px 16px;
}
.portfolio-item-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.portfolio-item-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.portfolio-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

/* ================================================================
   34. VERIFICATION STATUS
   ================================================================ */
.verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
}
.verification-badge.verified {
  background: rgba(var(--color-success-rgb), 0.15);
  color: var(--color-success);
}
.verification-badge.pending {
  background: rgba(var(--color-warning-rgb), 0.15);
  color: var(--color-warning);
}
.verification-badge.rejected {
  background: rgba(var(--color-error-rgb), 0.15);
  color: var(--color-error);
}
.verification-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}
.verification-card-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.verification-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.verification-card-icon.verified { background: rgba(var(--color-success-rgb), 0.15); color: var(--color-success); }
.verification-card-icon.pending { background: rgba(var(--color-warning-rgb), 0.15); color: var(--color-warning); }
.verification-card-icon.rejected { background: rgba(var(--color-error-rgb), 0.15); color: var(--color-error); }
.verification-card-icon.none { background: var(--color-bg-tertiary); color: var(--color-text-muted); }

/* ================================================================
   35. STEPPER / TIMELINE
   ================================================================ */
.stepper {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.stepper-horizontal {
  flex-direction: row;
  align-items: flex-start;
}
.stepper-step {
  display: flex;
  gap: 12px;
  position: relative;
  padding-bottom: 24px;
}
.stepper-step:last-child { padding-bottom: 0; }
.stepper-step::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.stepper-step:last-child::before { display: none; }
.stepper-step.completed::before { background: var(--color-success); }
.stepper-step.active::before { background: linear-gradient(to bottom, var(--color-accent-cyan), var(--color-border)); }
.stepper-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-muted);
  z-index: 1;
}
.stepper-step.completed .stepper-step-circle {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}
.stepper-step.active .stepper-step-circle {
  border-color: var(--color-accent-cyan);
  color: var(--color-accent-cyan);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.15);
}
.stepper-step-content {
  flex: 1;
  padding-top: 4px;
}
.stepper-step-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.stepper-step.completed .stepper-step-title { color: var(--color-success); }
.stepper-step-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

/* Horizontal stepper */
.stepper-horizontal .stepper-step {
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding-bottom: 0;
}
.stepper-horizontal .stepper-step::before {
  left: calc(50% + 20px);
  top: 15px;
  bottom: auto;
  width: auto;
  height: 2px;
  right: calc(-50% + 20px);
}
.stepper-horizontal .stepper-step-content {
  text-align: center;
  padding-top: 8px;
}

/* ================================================================
   36. EVENT / EXHIBITION CARD
   ================================================================ */
.event-card {
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition-normal);
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.event-card-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  padding: 10px 0;
  background: rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.1);
  flex-shrink: 0;
}
.event-card-date-month {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-accent-cyan);
}
.event-card-date-day {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1;
}
.event-card-row {
  display: flex;
}
.event-card-body {
  flex: 1;
  padding: 14px 16px;
}
.event-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  height: calc(0.9375rem * 1.4 * 2);
  position: relative;
}
.event-card-title.overflow-fade {
  -webkit-line-clamp: unset;
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.event-card-location {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.event-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ================================================================
   37. CALCULATOR / RESULT CARD
   ================================================================ */
.calc-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.calc-slider {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calc-slider label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  display: flex;
  justify-content: space-between;
}
.calc-slider label span {
  color: var(--color-accent-cyan);
  font-weight: 700;
}
.calc-slider input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-bg-tertiary);
  outline: none;
  -webkit-appearance: none;
}
.calc-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-cyan);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.2);
}
.calc-result {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.06);
  border: 1px solid rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.15);
}
.calc-result-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}
.calc-result-row.total {
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-primary);
}
.calc-result-value {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ================================================================
   38. DOCUMENT / TEMPLATE CARD
   ================================================================ */
.doc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.doc-card:hover {
  border-color: var(--color-accent-cyan);
  background: var(--color-bg-tertiary);
}
.doc-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.doc-card-icon.pdf { background: rgba(var(--color-error-rgb), 0.12); color: var(--color-error); }
.doc-card-icon.doc { background: rgba(var(--color-info-rgb), 0.12); color: var(--color-info); }
.doc-card-icon.xls { background: rgba(var(--color-success-rgb), 0.12); color: var(--color-success); }
.doc-card-icon.tmpl { background: rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.12); color: var(--color-accent-cyan); }
.doc-card-info {
  flex: 1;
  min-width: 0;
}
.doc-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.doc-card-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.doc-card-action {
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.doc-card:hover .doc-card-action {
  color: var(--color-accent-cyan);
}

/* ================================================================
   39. STATS / DASHBOARD CARDS
   ================================================================ */
.stat-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.stat-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.stat-card-icon.cyan { background: rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.12); color: var(--color-accent-cyan); }
.stat-card-icon.pink { background: rgba(var(--color-accent-pink-rgb, 255, 0, 128), 0.12); color: var(--color-accent-pink); }
.stat-card-icon.success { background: rgba(var(--color-success-rgb), 0.12); color: var(--color-success); }
.stat-card-icon.warning { background: rgba(var(--color-warning-rgb), 0.12); color: var(--color-warning); }
.stat-card-body {
  flex: 1;
}
.stat-card-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1;
}
.stat-card-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.stat-card-change {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 6px;
}
.stat-card-change.up { color: var(--color-success); }
.stat-card-change.down { color: var(--color-error); }

/* ================================================================
   40. SEARCH BAR
   ================================================================ */
.search-bar {
  position: relative;
  width: 100%;
}
.search-bar-input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border-radius: var(--radius-full);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-bar-input:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.search-bar-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.search-bar-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  display: none;
}
.search-bar-input:not(:placeholder-shown) ~ .search-bar-clear {
  display: block;
}

/* ================================================================
   41. FILTER BAR
   ================================================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.filter-chip:hover {
  border-color: var(--color-accent-cyan);
  color: var(--color-text-primary);
}
.filter-chip.active {
  background: rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.12);
  border-color: var(--color-accent-cyan);
  color: var(--color-accent-cyan);
}
.filter-chip-remove {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-text-muted);
  color: var(--color-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  cursor: pointer;
}
.filter-range {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}
.filter-range input {
  width: 100px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--color-text-primary);
  font-size: 0.8125rem;
  outline: none;
}

/* ================================================================
   42. FILE UPLOAD / DRAG-N-DROP
   ================================================================ */
.file-upload {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--color-bg-secondary);
}
.file-upload:hover,
.file-upload.dragover {
  border-color: var(--color-accent-cyan);
  background: rgba(var(--color-accent-cyan-rgb, 0, 217, 255), 0.04);
}
.file-upload-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  color: var(--color-text-muted);
}
.file-upload-text {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.file-upload-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.file-upload-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.file-upload-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-size: 0.8125rem;
}
.file-upload-item-name {
  flex: 1;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-upload-item-size {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
}
.file-upload-item-remove {
  color: var(--color-error);
  cursor: pointer;
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* ================================================================
   43. LIGHTBOX
   ================================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: none;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: none;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-nav.prev { left: 20px; }
.lightbox-nav.next { right: 20px; }
.lightbox-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 16px;
  border-radius: var(--radius-full);
}

/* ================================================================
   44. ONLINE STATUS INDICATOR
   ================================================================ */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot.online {
  background: var(--color-success);
  box-shadow: 0 0 0 2px var(--color-bg-secondary), 0 0 6px rgba(var(--color-success-rgb), 0.5);
}
.status-dot.offline {
  background: var(--color-text-muted);
  box-shadow: 0 0 0 2px var(--color-bg-secondary);
}
.status-dot.busy {
  background: var(--color-error);
  box-shadow: 0 0 0 2px var(--color-bg-secondary), 0 0 6px rgba(var(--color-error-rgb), 0.5);
}
.status-dot.away {
  background: var(--color-warning);
  box-shadow: 0 0 0 2px var(--color-bg-secondary);
}
/* Overlay on avatar */
.avatar-status {
  position: relative;
  display: inline-block;
}
.avatar-status .status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* ================================================================
   45. MESSAGE STATUS (sent/delivered/read ticks)
   ================================================================ */
.msg-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  gap: 3px;
  color: var(--color-text-muted);
}
.msg-status-icon {
  width: 14px;
  height: 10px;
  position: relative;
}
.msg-status-icon::before,
.msg-status-icon::after {
  content: '';
  position: absolute;
  bottom: 1px;
  width: 6px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.msg-status-icon::before { left: 0; }
.msg-status-icon::after { left: 4px; display: none; }
.msg-status.delivered .msg-status-icon::after { display: block; }
.msg-status.read { color: var(--color-accent-cyan); }
.msg-status.read .msg-status-icon::after { display: block; }
.msg-status-time {
  font-size: 0.625rem;
  color: var(--color-text-muted);
}

/* ================================================================
   46. SOCIAL MEDIA ICONS (Telegram, VK, OK)
   ================================================================ */
.social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.social-link:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}
.social-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
/* Branded hover colors — brand: intentional, do not replace with tokens */
.social-link--telegram:hover {
  background: rgba(38, 165, 227, 0.15);
  border-color: #26A5E4;
  color: #26A5E4;
}
.social-link--vk:hover {
  background: rgba(0, 119, 255, 0.15);
  border-color: #0077FF;
  color: #0077FF;
}
.social-link--ok:hover {
  background: rgba(238, 130, 8, 0.15);
  border-color: #EE8208;
  color: #EE8208;
}
/* Small variant */
.social-link--sm {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}
.social-link--sm svg {
  width: 16px;
  height: 16px;
}
/* Large variant */
.social-link--lg {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
}
.social-link--lg svg {
  width: 24px;
  height: 24px;
}

/* ================================================================
   47. GRADIENT TEXT
   ================================================================ */
.text-gradient-animated {
  background: linear-gradient(135deg, var(--color-accent-cyan) 0%, var(--color-accent-pink) 50%, var(--color-accent-purple) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ds-gradient-shift 4s ease-in-out infinite;
}
@keyframes ds-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ================================================================
   48. HERO SECTION
   ================================================================ */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 16px 40px;
  overflow: hidden;
}
.hero-section > .page-wrap {
  width: 100%;
}
.hero-section--full {
  min-height: 100vh;
}
.hero-bg-blobs {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(var(--color-accent-cyan-rgb), 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(var(--color-accent-pink-rgb), 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(var(--color-accent-purple-rgb), 0.06) 0%, transparent 50%);
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

/* ================================================================
   49. SCROLL ANIMATIONS (reveal on scroll)
   ================================================================ */
.ds-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.ds-reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.ds-reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.ds-reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}
.ds-reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.ds-reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}
.ds-reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.ds-reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* ================================================================
   50. MARQUEE / INFINITE SCROLL
   ================================================================ */
.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-inner {
  display: inline-block;
  animation: ds-marquee 30s linear infinite;
}
.marquee-inner--fast {
  animation-duration: 15s;
}
.marquee-inner--slow {
  animation-duration: 60s;
}
@keyframes ds-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================================================================
   51. SCROLL PROGRESS BAR
   ================================================================ */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent-cyan), var(--color-accent-pink), var(--color-accent-purple));
  z-index: 9999;
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
}

/* ================================================================
   52. FLOATING ANIMATION
   ================================================================ */
@keyframes ds-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.ds-float {
  animation: ds-float 6s ease-in-out infinite;
}
.ds-float--delayed {
  animation: ds-float 6s ease-in-out 2s infinite;
}
.ds-float--fast {
  animation: ds-float 3s ease-in-out infinite;
}

/* ================================================================
   53. TERMINAL / CODE PREVIEW
   ================================================================ */
.terminal {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.terminal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}
.terminal-dots {
  display: flex;
  gap: 6px;
}
.terminal-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.terminal-dots span:nth-child(1) { background: rgba(255, 95, 87, 0.7); }
.terminal-dots span:nth-child(2) { background: rgba(255, 189, 46, 0.7); }
.terminal-dots span:nth-child(3) { background: rgba(39, 201, 63, 0.7); }
.terminal-title {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-left: 8px;
}
.terminal-body {
  padding: 20px;
}
.terminal-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.terminal-prompt {
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 2px;
}
.terminal-cursor::after {
  content: '|';
  animation: ds-blink 1s step-end infinite;
  color: var(--color-accent-cyan);
}
@keyframes ds-blink {
  50% { opacity: 0; }
}

/* ================================================================
   54. COUNTER / STAT NUMBER
   ================================================================ */
.stat-counter {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.stat-grid {
  display: grid;
  gap: 32px;
  text-align: center;
}
.stat-grid--4 {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .stat-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.stat-number {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ================================================================
   55. GLOW BORDER EFFECT
   ================================================================ */
.glow-border {
  position: relative;
}
.glow-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-accent-cyan), var(--color-accent-pink), var(--color-accent-purple));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.glow-border:hover::before {
  opacity: 1;
}

/* ================================================================
   56. LANDING FOOTER
   ================================================================ */
.landing-footer {
  padding: 32px 24px;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
}
.landing-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 640px) {
  .landing-footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.landing-footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.landing-footer-copyright {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.landing-footer-links {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.75rem;
}
.landing-footer-links a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.landing-footer-links a:hover {
  color: var(--color-accent-cyan);
}

/* ================================================================
   57. SECTION HEADER (standard heading + subtitle)
   ================================================================ */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}
.section-header .section-label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.section-header .section-title {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-text-primary);
}
.section-header .section-desc {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 16px auto 0;
  line-height: 1.6;
}

/* ================================================================
   58. FEATURE LIST (check + title + desc)
   ================================================================ */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.feature-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.feature-icon svg {
  width: 16px;
  height: 16px;
}
.feature-title {
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.feature-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ================================================================
   59. STEP CARD (numbered step with icon)
   ================================================================ */
.step-card {
  padding: 24px;
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}
.step-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background var(--transition-fast);
}
.step-card-icon svg {
  width: 24px;
  height: 24px;
}
.step-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.step-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  min-height: 2.5em; /* equal height when title wraps to 1 or 2 lines */
}
.step-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ================================================================
   60. LANDING TOP NAV (fixed, glass on scroll)
   ================================================================ */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 0 16px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-nav.scrolled {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--glass-bg);
  border-bottom-color: var(--glass-border);
  box-shadow: var(--shadow-glass);
}
.landing-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  transition: height 0.3s ease;
}
.landing-nav.scrolled .landing-nav-inner {
  height: 56px;
}
.landing-nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.landing-nav-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-accent-cyan), var(--color-accent-pink));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.landing-nav-logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
/* Nav section links */
.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.landing-nav-link {
  position: relative;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-radius: 100px;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.landing-nav-link:hover {
  color: var(--color-text-primary);
  background: var(--glass-bg);
}
.landing-nav-link.active {
  color: var(--color-bg-primary);
  background: var(--color-accent-cyan);
  box-shadow: 0 0 20px rgba(var(--color-accent-cyan-rgb, 0, 210, 211), 0.3);
}
.landing-nav-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  transition: all 0.3s ease;
}
.landing-nav-link.active .landing-nav-dot {
  background: var(--color-bg-primary) !important;
  box-shadow: 0 0 8px currentColor;
}
/* Nav right controls */
.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
/* Mobile burger */
.landing-nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.3s;
}
.landing-nav-burger:hover {
  background: var(--glass-bg);
}
.landing-nav-burger-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
}
@media (max-width: 1024px) {
  .landing-nav-links { display: none; }
  .landing-nav-burger { display: flex; }
  .landing-nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    padding: 12px;
    border-radius: 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-glass);
    gap: 4px;
  }
}

/* ================================================================
   61. SIDE DOT NAVIGATION
   ================================================================ */
.side-dot-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.side-dot-nav .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-text-muted);
  background: transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}
.side-dot-nav .dot.active {
  border-color: var(--color-accent-cyan);
  background: var(--color-accent-cyan);
  box-shadow: 0 0 12px var(--color-accent-cyan);
}
.side-dot-nav .dot-label {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 11px;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.side-dot-nav .dot:hover .dot-label,
.side-dot-nav .dot.active .dot-label {
  opacity: 1;
  color: var(--color-accent-cyan);
}
@media (max-width: 768px) {
  .side-dot-nav { display: none; }
}

/* ================================================================
   62. LANGUAGE SWITCHER
   ================================================================ */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 100px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}
.lang-switcher-btn {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  background: transparent;
  color: var(--color-text-muted);
}
.lang-switcher-btn.active {
  background: var(--color-accent-cyan);
  color: var(--color-bg-primary);
  font-weight: 700;
}
.lang-switcher-btn:not(.active):hover {
  color: var(--color-text-primary);
}

/* ================================================================
   63. HERO BADGE (pill with dot)
   ================================================================ */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-cyan);
  animation: ds-pulse 2s ease-in-out infinite;
}
@keyframes ds-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ================================================================
   64. NOISE OVERLAY
   ================================================================ */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ================================================================
   65. MARQUEE STRIP (themed divider)
   ================================================================ */
.marquee-strip {
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.marquee-strip .marquee-inner {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-text-muted);
  opacity: 0.15;
  letter-spacing: 0.05em;
}

/* ================================================================
   66. THEME TOGGLE (dropdown picker, works without Tailwind)
   ================================================================ */
.theme-toggle {
  position: relative;
}
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-secondary);
  color: var(--color-accent-purple);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.theme-toggle-btn:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-accent-pink);
  box-shadow: 0 0 12px rgba(var(--color-accent-cyan-rgb), 0.3);
}
.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
}
/* Dropdown */
.theme-toggle-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  width: 220px;
  border-radius: var(--radius-lg, 12px);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  z-index: 50;
  overflow: hidden;
}
.theme-toggle-dropdown-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-bg-tertiary);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.theme-toggle-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.theme-toggle-option:hover,
.theme-toggle-option.active {
  background: var(--color-bg-tertiary);
}
.theme-toggle-swatch {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--color-bg-tertiary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.theme-toggle-swatch-bg {
  flex: 1;
}
.theme-toggle-swatch-accent {
  height: 5px;
}
.theme-toggle-option-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
}
.theme-toggle-option-sub {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}
.theme-toggle-check {
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--color-accent-cyan);
}

/* ================================================================
   67. LANDING FOOTER FULL (4-column with menus + socials)
   ================================================================ */
.landing-footer-full {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-bg-tertiary);
}
.landing-footer-full-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 0;
}
.landing-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .landing-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
}
/* Brand column */
.landing-footer-brand {
  grid-column: span 2;
}
@media (min-width: 768px) {
  .landing-footer-brand { grid-column: span 1; }
}
.landing-footer-brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.landing-footer-brand-logo .landing-nav-logo-icon {
  width: 32px; height: 32px; font-size: 11px; border-radius: 8px;
}
.landing-footer-brand-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.landing-footer-brand-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
/* Menu columns */
.landing-footer-col-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}
.landing-footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.landing-footer-menu a {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.landing-footer-menu a:hover {
  color: var(--color-accent-cyan);
}
/* Bottom bar */
.landing-footer-bottom {
  border-top: 1px solid var(--color-bg-tertiary);
  margin-top: 40px;
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.landing-footer-copy {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.landing-footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.landing-footer-bottom-tag {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.landing-footer-bottom-dot {
  width: 4px;
  height: 4px;
  background: var(--color-accent-cyan);
  border-radius: 50%;
  display: inline-block;
}

/* ================================================================
   68. SEARCH BAR (hero search with icon + button)
   ================================================================ */
.search-bar {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.search-bar:focus-within {
  box-shadow: 0 0 0 2px var(--color-accent-cyan), var(--shadow-glow-cyan);
}
@media (min-width: 640px) {
  .search-bar { flex-direction: row; }
}
.search-bar-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-bg-tertiary);
}
@media (min-width: 640px) {
  .search-bar-field {
    border-bottom: none;
    border-right: 1px solid var(--color-bg-tertiary);
  }
}
.search-bar-field svg {
  width: 18px; height: 18px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.search-bar-field input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text-primary);
  font-size: 0.875rem;
}
.search-bar-field input::placeholder {
  color: var(--color-text-muted);
}
.search-bar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--color-accent-cyan);
  color: var(--color-bg-primary);
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.2s;
  white-space: nowrap;
}
.search-bar-btn:hover {
  box-shadow: var(--shadow-glow-cyan);
}
.search-bar-btn svg {
  width: 18px; height: 18px;
}
/* Quick filter tags */
.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.search-tag {
  padding: 4px 12px;
  background: var(--color-bg-tertiary);
  border-radius: 100px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  border: none;
}
.search-tag:hover, .search-tag.active {
  color: var(--color-accent-cyan);
  background: var(--color-bg-secondary);
}

/* ================================================================
   69. PROFESSIONAL CARD (marketplace card with avatar, rating, tags)
   ================================================================ */
.pro-card-full {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.pro-card-full:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-cyan);
}
.pro-card-full .pro-card-cover {
  height: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pro-card-cover-emoji {
  font-size: 3.5rem;
  opacity: 0.3;
}
.pro-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pro-card-badge--verified {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
}
.pro-card-badge--verified::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--color-success);
  border-radius: 50%;
}
.pro-card-badge--premium {
  background: rgba(var(--color-accent-purple-rgb), 0.15);
  color: var(--color-accent-purple);
}
.pro-card-full .pro-card-body {
  padding: 20px;
}
.pro-card-full .pro-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pro-card-full .pro-card-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.pro-card-full .pro-card-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.pro-card-location {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.pro-card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.pro-card-stars {
  color: var(--color-accent-cyan);
  font-size: 0.875rem;
}
.pro-card-reviews {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.pro-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.pro-card-tag {
  padding: 2px 8px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.pro-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pro-card-price {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.pro-card-price strong {
  color: var(--color-accent-cyan);
  font-weight: 600;
}
.pro-card-link {
  font-size: 0.875rem;
  color: var(--color-accent-cyan);
  text-decoration: none;
}
.pro-card-link:hover { text-decoration: underline; }

/* ================================================================
   70. CATEGORY CARD (icon + label + count)
   ================================================================ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .category-grid { grid-template-columns: repeat(6, 1fr); } }
.category-card {
  text-align: center;
  padding: 20px 12px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.category-card:hover {
  border-color: rgba(var(--color-accent-cyan-rgb), 0.3);
  transform: translateY(-2px);
}
.category-card-icon {
  width: 52px; height: 52px;
  margin: 0 auto 10px;
  border-radius: var(--radius-lg, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: transform 0.3s, background 0.3s;
}
.category-card:hover .category-card-icon {
  transform: scale(1.1);
}
.category-card-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}
.category-card-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ================================================================
   71. TENDER PREVIEW CARD (compact tender listing)
   ================================================================ */
.tender-preview {
  padding: 16px;
  background: rgba(var(--color-bg-tertiary-rgb, 30, 30, 40), 0.5);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-lg, 12px);
  transition: border-color 0.2s;
}
.tender-preview:hover {
  border-color: rgba(var(--color-accent-purple-rgb), 0.3);
}
.tender-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tender-preview-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}
.tender-preview-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.6875rem;
  background: rgba(var(--color-accent-purple-rgb), 0.1);
  color: var(--color-accent-purple);
}
.tender-preview-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}
.tender-preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tender-preview-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent-cyan);
}
.tender-preview-bids {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ================================================================
   72. PROJECT TIMELINE (vertical status dots)
   ================================================================ */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.timeline-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.timeline-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.timeline-dot--done {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
}
.timeline-dot--done svg { width: 14px; height: 14px; }
.timeline-dot--active {
  background: rgba(var(--color-accent-cyan-rgb), 0.15);
  color: var(--color-accent-cyan);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-cyan-rgb), 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(var(--color-accent-cyan-rgb), 0); }
}
.timeline-dot--active::after {
  content: '';
  width: 8px; height: 8px;
  background: var(--color-accent-cyan);
  border-radius: 50%;
}
.timeline-dot--pending {
  background: var(--color-bg-tertiary);
}
.timeline-dot--pending::after {
  content: '';
  width: 6px; height: 6px;
  background: var(--color-text-muted);
  border-radius: 50%;
}
.timeline-content {
  flex: 1;
}
.timeline-title {
  font-size: 0.875rem;
  color: var(--color-text-primary);
}
.timeline-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.timeline-status {
  font-size: 0.75rem;
  flex-shrink: 0;
}
.timeline-status--done { color: var(--color-success); }
.timeline-status--active { color: var(--color-accent-cyan); }
.timeline-status--pending { color: var(--color-text-muted); }
.timeline-item--pending { opacity: 0.5; }
/* Escrow info bar */
.timeline-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-md, 8px);
  background: rgba(var(--color-accent-cyan-rgb), 0.05);
  border: 1px solid rgba(var(--color-accent-cyan-rgb), 0.1);
  margin-top: 8px;
}
.timeline-info svg {
  width: 18px; height: 18px;
  color: var(--color-accent-cyan);
  flex-shrink: 0;
}
.timeline-info span {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

/* ================================================================
   73. CONNECTOR LINE (vertical gradient between sections)
   ================================================================ */
.connector-line {
  width: 3px;
  height: 64px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--color-accent-cyan), var(--color-accent-pink));
  border-radius: 2px;
}

/* ================================================================
   74. BID ROW (compact designer/bidder row)
   ================================================================ */
.bid-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-lg, 12px);
  transition: border-color 0.2s;
}
.bid-row:hover {
  border-color: rgba(var(--color-accent-purple-rgb), 0.3);
}
.bid-row--selected {
  border-color: rgba(var(--color-accent-purple-rgb), 0.3);
  box-shadow: 0 0 0 1px rgba(var(--color-accent-purple-rgb), 0.2);
}
.bid-row-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.bid-row-info {
  flex: 1;
  min-width: 0;
}
.bid-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bid-row-name span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}
.bid-row-name .bid-row-rating {
  font-size: 0.75rem;
  color: var(--color-accent-cyan);
}
.bid-row-match {
  padding: 2px 6px;
  background: rgba(var(--color-accent-purple-rgb), 0.1);
  color: var(--color-accent-purple);
  font-size: 0.6875rem;
  border-radius: 4px;
}
.bid-row-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bid-row-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent-cyan);
  flex-shrink: 0;
}

/* ================================================================
   75. KANBAN BOARD (3 board types: client, b2b, designer-cabinet)
   ================================================================ */

/* --- Board wrapper --- */
.kanban {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  min-height: 400px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.kanban::-webkit-scrollbar { height: 6px; }
.kanban::-webkit-scrollbar-thumb { background: var(--color-bg-tertiary); border-radius: 3px; }

/* --- Column --- */
.kanban-column {
  flex: 0 0 280px;
  max-width: 320px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border, var(--color-bg-tertiary));
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 180px);
  scroll-snap-align: start;
}
.kanban-column--active {
  border-color: rgba(var(--color-accent-cyan-rgb), 0.3);
}

/* Column header */
.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--color-bg-tertiary);
  flex-shrink: 0;
}
.kanban-column-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.kanban-column-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

/* Status indicator dot in column header */
.kanban-column-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kanban-column-dot--contract    { background: var(--color-accent-purple); }
.kanban-column-dot--design      { background: var(--color-accent-cyan); }
.kanban-column-dot--production  { background: var(--color-warning); }
.kanban-column-dot--delivery    { background: var(--color-warning); }
.kanban-column-dot--exhibition  { background: var(--color-accent-pink); }
.kanban-column-dot--completed   { background: var(--color-success); }
.kanban-column-dot--in-progress { background: var(--color-accent-cyan); }
.kanban-column-dot--review      { background: var(--color-warning); }
.kanban-column-dot--corrections { background: var(--color-error); }
.kanban-column-dot--delivered   { background: var(--color-success); }
.kanban-column-dot--archived    { background: var(--color-text-muted); }

/* Column body (scrollable card list) */
.kanban-column-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kanban-column-body::-webkit-scrollbar { width: 4px; }
.kanban-column-body::-webkit-scrollbar-thumb { background: var(--color-bg-tertiary); border-radius: 2px; }

/* Empty column state */
.kanban-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-align: center;
  gap: 8px;
}
.kanban-empty svg {
  width: 32px;
  height: 32px;
  opacity: 0.4;
}

/* --- Card --- */
.kanban-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: grab;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  position: relative;
}
.kanban-card:hover {
  border-color: rgba(var(--color-accent-cyan-rgb), 0.3);
  box-shadow: var(--shadow-md);
}
.kanban-card:active {
  cursor: grabbing;
}

/* Read-only card (exhibitor on client board, builder on b2b board) */
.kanban-card--readonly {
  cursor: default;
}
.kanban-card--readonly:hover {
  border-color: var(--color-bg-tertiary);
  box-shadow: none;
}

/* Drag states */
.kanban-card--dragging {
  opacity: 0.6;
  transform: rotate(2deg) scale(1.02);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  border-color: var(--color-accent-cyan);
}
.kanban-card--ghost {
  opacity: 0.3;
  border: 2px dashed var(--color-accent-cyan);
  background: transparent;
}
.kanban-column--drop-target {
  border-color: var(--color-accent-cyan);
  background: rgba(var(--color-accent-cyan-rgb), 0.03);
}

/* Card priority stripe */
.kanban-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: transparent;
}
.kanban-card--priority-high::before   { background: var(--color-error); }
.kanban-card--priority-medium::before { background: var(--color-warning); }
.kanban-card--priority-low::before    { background: var(--color-success); }

/* Card header row */
.kanban-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.kanban-card-id {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  font-family: 'Space Mono', 'Fira Code', monospace;
}
.kanban-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card meta row (deadline, assignee, etc.) */
.kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.kanban-card-deadline {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.kanban-card-deadline--overdue {
  color: var(--color-error);
  font-weight: 600;
}
.kanban-card-deadline--soon {
  color: var(--color-warning);
}

/* Card assignee avatar */
.kanban-card-assignee {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* Card tags */
.kanban-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.kanban-card-tag {
  font-size: 0.625rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(var(--color-accent-purple-rgb), 0.1);
  color: var(--color-accent-purple);
  font-weight: 500;
}
.kanban-card-tag--design   { background: rgba(var(--color-accent-cyan-rgb), 0.1); color: var(--color-accent-cyan); }
.kanban-card-tag--build    { background: rgba(var(--color-accent-pink-rgb), 0.1); color: var(--color-accent-pink); }
.kanban-card-tag--urgent   { background: rgba(var(--color-error-rgb, 239, 68, 68), 0.15); color: var(--color-error); }

/* --- Board type modifiers --- */

/* Client board: soft accent */
.kanban--client .kanban-column-header {
  border-bottom-color: rgba(var(--color-accent-purple-rgb), 0.15);
}

/* B2B board: cyan accent */
.kanban--b2b .kanban-column-header {
  border-bottom-color: rgba(var(--color-accent-cyan-rgb), 0.15);
}

/* Designer cabinet: pink accent + compact cards */
.kanban--designer .kanban-column-header {
  border-bottom-color: rgba(var(--color-accent-pink-rgb), 0.15);
}
.kanban--designer .kanban-card {
  padding: 10px;
}

/* --- Board toolbar (filters, search) --- */
.kanban-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.kanban-toolbar-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kanban-toolbar-filter select,
.kanban-toolbar-filter input {
  padding: 6px 10px;
  font-size: 0.8125rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast);
}
.kanban-toolbar-filter select:focus,
.kanban-toolbar-filter input:focus {
  border-color: var(--color-accent-cyan);
  outline: none;
}
.kanban-toolbar-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Board tabs (switch between Client / B2B / Cabinet) */
.kanban-tabs {
  display: flex;
  gap: 2px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: 3px;
  border: 1px solid var(--color-bg-tertiary);
}
.kanban-tab {
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: transparent;
}
.kanban-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}
.kanban-tab--active {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
}

/* Move direction indicators */
.kanban-card-move {
  display: none;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-bg-tertiary);
}
.kanban-card:hover .kanban-card-move {
  display: flex;
}
.kanban-card--readonly .kanban-card-move {
  display: none !important;
}
.kanban-move-btn {
  padding: 4px 8px;
  font-size: 0.6875rem;
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.kanban-move-btn:hover {
  border-color: var(--color-accent-cyan);
  color: var(--color-accent-cyan);
}
.kanban-move-btn--disabled {
  opacity: 0.3;
  pointer-events: none;
}
.kanban-move-btn--back {
  border-color: rgba(var(--color-warning-rgb), 0.3);
  color: var(--color-warning);
}

/* Read-only badge */
.kanban-readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  background: rgba(var(--color-accent-purple-rgb), 0.1);
  color: var(--color-accent-purple);
}

/* --- Responsive: single column on mobile --- */
@media (max-width: 768px) {
  .kanban {
    flex-direction: column;
    gap: 12px;
  }
  .kanban-column {
    flex: none;
    max-width: 100%;
    max-height: none;
  }
  .kanban-column-body {
    max-height: 300px;
  }
}

/* ================================================================
   76. NOTIFICATION SYSTEM (bell, dropdown, items, preferences)
   ================================================================ */

/* --- Bell button --- */
.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.notif-bell:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.notif-bell svg {
  width: 22px;
  height: 22px;
}

/* Unread counter badge */
.notif-bell-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-error);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--color-bg-primary);
  line-height: 1;
}
.notif-bell-count:empty {
  display: none;
}
.notif-bell-count--pulse {
  animation: notif-pulse 2s infinite;
}
@keyframes notif-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--color-bg-primary); }
  50% { box-shadow: 0 0 0 2px var(--color-bg-primary), 0 0 0 6px rgba(var(--color-error-rgb, 239, 68, 68), 0.3); }
}

/* --- Dropdown panel --- */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 480px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border, var(--color-bg-tertiary));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 600;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: all var(--transition-fast);
}
.notif-dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Dropdown header */
.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--color-bg-tertiary);
  flex-shrink: 0;
}
.notif-dropdown-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.notif-dropdown-actions {
  display: flex;
  gap: 8px;
}
.notif-action-btn {
  font-size: 0.75rem;
  color: var(--color-accent-cyan);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  transition: color var(--transition-fast);
}
.notif-action-btn:hover {
  color: var(--color-accent-pink);
}

/* Dropdown tab filters */
.notif-tabs {
  display: flex;
  padding: 8px 16px 0;
  gap: 4px;
  border-bottom: 1px solid var(--color-bg-tertiary);
  flex-shrink: 0;
}
.notif-tab {
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-fast);
}
.notif-tab:hover {
  color: var(--color-text-primary);
}
.notif-tab--active {
  color: var(--color-accent-cyan);
  border-bottom-color: var(--color-accent-cyan);
}

/* Notification list (scrollable) */
.notif-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-thumb { background: var(--color-bg-tertiary); border-radius: 2px; }

/* --- Notification item --- */
.notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}
.notif-item:hover {
  background: var(--color-bg-tertiary);
}

/* Unread state */
.notif-item--unread {
  background: rgba(var(--color-accent-cyan-rgb), 0.04);
}
.notif-item--unread::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-cyan);
  transform: translateY(-50%);
}

/* Icon container */
.notif-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.notif-item-icon--status   { background: rgba(var(--color-accent-cyan-rgb), 0.1); color: var(--color-accent-cyan); }
.notif-item-icon--message  { background: rgba(var(--color-accent-purple-rgb), 0.1); color: var(--color-accent-purple); }
.notif-item-icon--bid      { background: rgba(var(--color-success-rgb), 0.1); color: var(--color-success); }
.notif-item-icon--exchange { background: rgba(var(--color-accent-pink-rgb), 0.1); color: var(--color-accent-pink); }
.notif-item-icon--deadline { background: rgba(var(--color-warning-rgb), 0.1); color: var(--color-warning); }
.notif-item-icon--system   { background: var(--color-bg-tertiary); color: var(--color-text-muted); }

/* Content */
.notif-item-content {
  flex: 1;
  min-width: 0;
}
.notif-item-text {
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-item-text strong {
  font-weight: 600;
}
.notif-item-time {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Dropdown footer */
.notif-dropdown-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--color-bg-tertiary);
  text-align: center;
  flex-shrink: 0;
}
.notif-dropdown-footer a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-accent-cyan);
}

/* Empty state */
.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-align: center;
  gap: 8px;
}
.notif-empty svg {
  width: 40px;
  height: 40px;
  opacity: 0.3;
}

/* --- Notification preferences matrix --- */
.notif-prefs {
  width: 100%;
  border-collapse: collapse;
}
.notif-prefs th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid var(--color-bg-tertiary);
}
.notif-prefs th:first-child {
  text-align: left;
}
.notif-prefs td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-bg-tertiary);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
}
.notif-prefs td:first-child {
  text-align: left;
  font-weight: 500;
}
.notif-prefs tr:hover td {
  background: rgba(var(--color-accent-cyan-rgb), 0.03);
}

/* Toggle switch for preferences */
.notif-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.notif-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.notif-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.notif-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: var(--color-text-secondary);
  border-radius: 50%;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.notif-toggle input:checked + .notif-toggle-slider {
  background: rgba(var(--color-accent-cyan-rgb), 0.3);
}
.notif-toggle input:checked + .notif-toggle-slider::before {
  transform: translateX(16px);
  background: var(--color-accent-cyan);
}

/* Channel icons in preferences header */
.notif-channel-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.notif-channel-icon svg {
  width: 16px;
  height: 16px;
}

/* --- Toast notification (in-app popup) --- */
.notif-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  min-width: 320px;
  max-width: 420px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  transform: translateX(120%);
  transition: transform var(--transition-slow);
}
.notif-toast--visible {
  transform: translateX(0);
}
.notif-toast-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.notif-toast-body {
  flex: 1;
  min-width: 0;
}
.notif-toast-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.notif-toast-text {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.notif-toast-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.notif-toast-close:hover {
  color: var(--color-text-primary);
}

/* Toast type borders */
.notif-toast--status   { border-left: 3px solid var(--color-accent-cyan); }
.notif-toast--message  { border-left: 3px solid var(--color-accent-purple); }
.notif-toast--bid      { border-left: 3px solid var(--color-success); }
.notif-toast--exchange { border-left: 3px solid var(--color-accent-pink); }
.notif-toast--deadline { border-left: 3px solid var(--color-warning); }

/* Responsive */
@media (max-width: 768px) {
  .notif-dropdown {
    width: calc(100vw - 24px);
    right: -60px;
  }
  .notif-toast {
    right: 12px;
    left: 12px;
    min-width: 0;
    max-width: none;
  }
}

/* ================================================================
   77. B2B EXCHANGE (request/offer cards, responses, anonymous)
   ================================================================ */

/* --- Exchange card (request or offer) --- */
.exchange-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}
.exchange-card:hover {
  border-color: rgba(var(--color-accent-cyan-rgb), 0.3);
  box-shadow: var(--shadow-md);
}

/* Card type accent stripe */
.exchange-card--request {
  border-left: 3px solid var(--color-accent-cyan);
}
.exchange-card--offer {
  border-left: 3px solid var(--color-accent-pink);
}

/* Header row */
.exchange-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.exchange-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.exchange-card-type {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.exchange-card-type--request {
  background: rgba(var(--color-accent-cyan-rgb), 0.1);
  color: var(--color-accent-cyan);
}
.exchange-card-type--offer {
  background: rgba(var(--color-accent-pink-rgb), 0.1);
  color: var(--color-accent-pink);
}

/* Anonymous badge */
.exchange-anon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}
.exchange-anon svg {
  width: 12px;
  height: 12px;
}

/* Meta grid (area, budget, deadline, etc.) */
.exchange-card-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-bg-tertiary);
}
.exchange-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exchange-meta-label {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.exchange-meta-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Description */
.exchange-card-desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Skills / specializations tags */
.exchange-card-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.exchange-skill {
  padding: 3px 10px;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  background: rgba(var(--color-accent-purple-rgb), 0.1);
  color: var(--color-accent-purple);
}

/* Footer row (responses count, author, actions) */
.exchange-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.exchange-responses-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.exchange-responses-count strong {
  color: var(--color-accent-cyan);
  font-weight: 600;
}

/* Author info (or anonymous) */
.exchange-author {
  display: flex;
  align-items: center;
  gap: 8px;
}
.exchange-author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.exchange-author-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
}
.exchange-author-role {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* --- Response card (designer's response to request) --- */
.exchange-response {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}
.exchange-response:hover {
  border-color: rgba(var(--color-accent-cyan-rgb), 0.2);
}
.exchange-response-body {
  flex: 1;
  min-width: 0;
}
.exchange-response-msg {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-bottom: 8px;
}
.exchange-response-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent-cyan);
}
.exchange-response-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}

/* Tabs: Demand / Supply */
.exchange-tabs {
  display: flex;
  gap: 2px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: 3px;
  border: 1px solid var(--color-bg-tertiary);
  margin-bottom: 16px;
}
.exchange-tab {
  flex: 1;
  padding: 10px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: center;
  transition: all var(--transition-fast);
}
.exchange-tab:hover {
  color: var(--color-text-primary);
}
.exchange-tab--active {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
}

/* Exchange grid */
.exchange-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .exchange-grid {
    grid-template-columns: 1fr;
  }
  .exchange-card-meta {
    grid-template-columns: 1fr 1fr;
  }
}

/* ================================================================
   78. B2B SERVICE MARKETPLACE (service cards, category groups, inquiry)
   ================================================================ */

/* --- Category group header --- */
.svc-group {
  margin-bottom: 32px;
}
.svc-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-bg-tertiary);
}
.svc-group-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.svc-group-icon--equipment  { background: rgba(var(--color-accent-cyan-rgb), 0.1); color: var(--color-accent-cyan); }
.svc-group-icon--content    { background: rgba(var(--color-accent-pink-rgb), 0.1); color: var(--color-accent-pink); }
.svc-group-icon--personnel  { background: rgba(var(--color-accent-purple-rgb), 0.1); color: var(--color-accent-purple); }
.svc-group-icon--services   { background: rgba(var(--color-warning-rgb), 0.1); color: var(--color-warning); }
.svc-group-icon--client     { background: rgba(var(--color-success-rgb), 0.1); color: var(--color-success); }
.svc-group-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.svc-group-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* --- Category chip --- */
.svc-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.svc-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.svc-category-chip:hover {
  border-color: rgba(var(--color-accent-cyan-rgb), 0.3);
  color: var(--color-text-primary);
}
.svc-category-chip--active {
  background: rgba(var(--color-accent-cyan-rgb), 0.1);
  border-color: var(--color-accent-cyan);
  color: var(--color-accent-cyan);
}
.svc-category-chip-count {
  font-size: 0.6875rem;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

/* --- Service listing card --- */
.svc-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.svc-card:hover {
  border-color: rgba(var(--color-accent-cyan-rgb), 0.3);
  box-shadow: var(--shadow-md);
}

/* Card image */
.svc-card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--color-bg-tertiary);
}
.svc-card-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-text-muted);
  opacity: 0.5;
}

/* Card body */
.svc-card-body {
  padding: 16px;
}
.svc-card-category {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent-cyan);
  margin-bottom: 6px;
}
.svc-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-bottom: 6px;
}
.svc-card-provider {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
}
.svc-card-provider-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
}
.svc-card-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}

/* Card footer */
.svc-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--color-bg-tertiary);
}
.svc-card-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent-cyan);
}
.svc-card-price-type {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  font-weight: 400;
}
.svc-card-location {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Availability badge */
.svc-avail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: var(--radius-full);
}
.svc-avail--available {
  background: rgba(var(--color-success-rgb), 0.1);
  color: var(--color-success);
}
.svc-avail--busy {
  background: rgba(var(--color-warning-rgb), 0.1);
  color: var(--color-warning);
}
.svc-avail--unavailable {
  background: rgba(var(--color-error-rgb, 239, 68, 68), 0.1);
  color: var(--color-error);
}

/* Inquiry button */
.svc-inquiry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--gradient-accent-start), var(--gradient-accent-end));
  color: #fff;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.svc-inquiry-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Service grid */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Specifications list */
.svc-specs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}
.svc-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  padding: 4px 0;
}
.svc-spec-row:not(:last-child) {
  border-bottom: 1px solid var(--color-bg-tertiary);
}
.svc-spec-label {
  color: var(--color-text-muted);
}
.svc-spec-value {
  color: var(--color-text-primary);
  font-weight: 500;
}

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

/* ================================================================
   79. AI CONSULTANT (chat stream, brief card, form)
   ================================================================ */

/* --- AI Chat container --- */
.ai-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  min-height: 400px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Chat header */
.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-bg-tertiary);
  flex-shrink: 0;
}
.ai-chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--gradient-accent-start), var(--gradient-accent-end));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
  flex-shrink: 0;
}
.ai-chat-info {
  flex: 1;
}
.ai-chat-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.ai-chat-status {
  font-size: 0.75rem;
  color: var(--color-success);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-chat-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}

/* Messages area */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ai-chat-messages::-webkit-scrollbar { width: 4px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: var(--color-bg-tertiary); border-radius: 2px; }

/* Message bubble */
.ai-msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  line-height: 1.5;
}
.ai-msg--user {
  align-self: flex-end;
  background: rgba(var(--color-accent-cyan-rgb), 0.1);
  color: var(--color-text-primary);
  border-bottom-right-radius: 4px;
}
.ai-msg--ai {
  align-self: flex-start;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--color-bg-tertiary);
}

/* Streaming typing indicator */
.ai-msg--streaming::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 14px;
  background: var(--color-accent-cyan);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: ai-cursor-blink 0.8s infinite;
}
@keyframes ai-cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Thinking dots */
.ai-thinking {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  align-self: flex-start;
}
.ai-thinking-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
  animation: ai-think 1.4s infinite;
}
.ai-thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-thinking-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-think {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
}

/* Input area */
.ai-chat-input {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 16px 20px;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-bg-tertiary);
  flex-shrink: 0;
}
.ai-chat-textarea {
  flex: 1;
  resize: none;
  padding: 10px 14px;
  font-size: 0.875rem;
  line-height: 1.4;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  max-height: 120px;
  transition: border-color var(--transition-fast);
}
.ai-chat-textarea:focus {
  border-color: var(--color-accent-cyan);
  outline: none;
}
.ai-chat-textarea::placeholder {
  color: var(--color-text-muted);
}
.ai-chat-send {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--gradient-accent-start), var(--gradient-accent-end));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.ai-chat-send:hover {
  opacity: 0.9;
  transform: scale(1.05);
}
.ai-chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* --- AI Consultant form --- */
.ai-form {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.ai-form-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.ai-form-subtitle {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.ai-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ai-form-grid--full {
  grid-column: 1 / -1;
}

/* --- Brief card (AI-generated output) --- */
.ai-brief {
  background: var(--color-bg-secondary);
  border: 1px solid rgba(var(--color-accent-cyan-rgb), 0.2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ai-brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(var(--color-accent-cyan-rgb), 0.05);
  border-bottom: 1px solid rgba(var(--color-accent-cyan-rgb), 0.1);
}
.ai-brief-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-cyan);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-brief-actions {
  display: flex;
  gap: 6px;
}
.ai-brief-body {
  padding: 20px;
}

/* Brief sections */
.ai-brief-section {
  margin-bottom: 16px;
}
.ai-brief-section:last-child {
  margin-bottom: 0;
}
.ai-brief-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-brief-section-content {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.ai-brief-section-content ul {
  padding-left: 16px;
  margin: 4px 0;
}
.ai-brief-section-content li {
  margin-bottom: 2px;
}

/* Exhibition recommendation card */
.ai-rec-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: border-color var(--transition-fast);
}
.ai-rec-card:hover {
  border-color: rgba(var(--color-accent-cyan-rgb), 0.3);
}
.ai-rec-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gradient-accent-start), var(--gradient-accent-end));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.ai-rec-info {
  flex: 1;
  min-width: 0;
}
.ai-rec-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.ai-rec-detail {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.ai-rec-match {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent-cyan);
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 768px) {
  .ai-form-grid {
    grid-template-columns: 1fr;
  }
  .ai-msg {
    max-width: 95%;
  }
}

/* ================================================================
   80. PROJECT DETAIL PANEL (slide-out, status history, actions)
   ================================================================ */

/* --- Slide-out panel --- */
.project-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 90vw;
  height: 100vh;
  background: var(--color-bg-secondary);
  border-left: 1px solid var(--color-bg-tertiary);
  box-shadow: var(--shadow-xl);
  z-index: 700;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
}
.project-panel--open {
  transform: translateX(0);
}
.project-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--color-bg-primary-rgb), 0.6);
  z-index: 699;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
}
.project-panel-overlay--visible {
  opacity: 1;
  visibility: visible;
}

/* Panel header */
.project-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--color-bg-tertiary);
  flex-shrink: 0;
}
.project-panel-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-panel-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.project-panel-close:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text-primary);
}

/* Panel body (scrollable) */
.project-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.project-panel-body::-webkit-scrollbar { width: 4px; }
.project-panel-body::-webkit-scrollbar-thumb { background: var(--color-bg-tertiary); border-radius: 2px; }

/* Section within panel */
.project-section {
  margin-bottom: 24px;
}
.project-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

/* Info grid (key-value pairs) */
.project-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.project-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.project-info-label {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.project-info-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Current status bar */
.project-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}
.project-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.project-status-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  flex: 1;
}
.project-status-date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* --- Status history timeline --- */
.project-history {
  position: relative;
  padding-left: 24px;
}
.project-history::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--color-bg-tertiary);
}
.project-history-item {
  position: relative;
  padding-bottom: 16px;
}
.project-history-item:last-child {
  padding-bottom: 0;
}
.project-history-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-bg-tertiary);
  background: var(--color-bg-secondary);
}
.project-history-item:first-child .project-history-dot {
  border-color: var(--color-accent-cyan);
  background: var(--color-accent-cyan);
}
.project-history-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.project-history-meta {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.project-history-comment {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--color-bg-primary);
  border-radius: var(--radius-sm);
}

/* Panel footer (actions) */
.project-panel-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--color-bg-tertiary);
  flex-shrink: 0;
}
.project-chat-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-accent-cyan);
  border: 1px solid rgba(var(--color-accent-cyan-rgb), 0.3);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.project-chat-link:hover {
  background: rgba(var(--color-accent-cyan-rgb), 0.1);
}

/* Quick move buttons in panel */
.project-panel-move {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .project-panel {
    width: 100vw;
    max-width: 100vw;
  }
  .project-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   MOBILE FOUNDATION — Touch targets, tables, modals
   ================================================================ */

/* Touch-friendly minimum sizes on touch devices */
@media (pointer: coarse) {
  .btn, .sidebar-link, .dropdown-item, .tab,
  .bottom-nav-item, .more-sheet-item,
  input, select, textarea {
    min-height: 44px;
  }
}

/* Responsive tables */
.table-responsive { width: 100%; }
@media (max-width: 767px) {
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Modal mobile constraints */
@media (max-width: 480px) {
  .modal { margin: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
}

/* Body text minimum on small screens */
@media (max-width: 480px) {
  .text-body { font-size: max(0.875rem, 14px); }
}

} /* end @layer components */

@layer responsive {
/* ================================================================
   MOBILE RESPONSIVE — Complete component coverage
   ================================================================ */

/* Alert container (replaces inline style in app.php) */
.alert-container {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 420px;
}

/* --- Tablet & Mobile (768px) --- */
@media (max-width: 768px) {

    /* Modals — full-width on mobile */
    .modal-backdrop { padding: 16px; }
    .modal { max-width: 100%; border-radius: var(--radius-lg); }
    .modal-header { padding: 16px; }
    .modal-body { padding: 16px; }
    .modal-footer { padding: 12px 16px; flex-wrap: wrap; }
    .modal-footer .btn { flex: 1; min-width: 0; }

    /* Toast/Alerts — edge-to-edge */
    .toast {
        right: 12px;
        left: 12px;
        min-width: 0;
        max-width: none;
    }
    .alert-container {
        right: 12px;
        left: 12px;
        max-width: none;
        top: 72px;
    }

    /* Chat/Messaging — stack vertically */
    .chat-container { flex-direction: column; height: auto; }
    .chat-sidebar {
        width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    .chat-messages { padding: 12px; }
    .chat-message { max-width: 85%; }
    .chat-composer { padding: 10px 12px; }
    .chat-header { padding: 10px 12px; }

    /* Tables — tighter padding */
    .table th, .table td { padding: 8px 10px; font-size: 0.8125rem; }

    /* Dropdowns — prevent overflow */
    .dropdown-menu { min-width: 160px; max-width: calc(100vw - 24px); }

    /* Cards — reduce padding */
    .card-header { padding: 12px 16px; }
    .card-body { padding: 16px; }
    .card-footer { padding: 12px 16px; }

    /* Buttons — smaller large variants */
    .btn-lg { padding: 12px 20px; font-size: 0.9375rem; }
    .btn-xl { padding: 14px 24px; font-size: 1rem; }

    /* Forms — tighter */
    textarea.input { min-height: 80px; }
    select.input { padding-right: 32px; }
    .form-group { margin-bottom: 16px; }

    /* Accordions */
    .accordion-trigger { padding: 12px 16px; font-size: 0.875rem; }
    .accordion-content { padding: 0 16px; }
    .accordion-item.open .accordion-content { padding: 12px 16px; }

    /* Professional Cards */
    .pro-card-cover { height: 90px; }
    .pro-card-avatar { width: 60px; height: 60px; bottom: -30px; left: 16px; }
    .pro-card-body { padding: 36px 16px 16px; }

    /* Empty States */
    .empty-state { padding: 40px 16px; }
    .empty-state-icon { width: 56px; height: 56px; }
    .empty-state-title { font-size: 1rem; }

    /* Stepper — vertical on mobile */
    .stepper-step { gap: 10px; padding-bottom: 16px; }
    .stepper-step-circle { width: 28px; height: 28px; font-size: 0.6875rem; }
    .stepper-step::before { left: 13px; top: 28px; }
    .stepper-horizontal { flex-direction: column; }
    .stepper-horizontal .stepper-step {
        flex-direction: row; align-items: flex-start; flex: none; padding-bottom: 16px;
    }
    .stepper-horizontal .stepper-step::before {
        left: 13px; top: 28px; right: auto; bottom: 0; width: 2px; height: auto;
    }
    .stepper-horizontal .stepper-step-content { text-align: left; }

    /* Pagination — wrap */
    .pagination { flex-wrap: wrap; justify-content: center; gap: 2px; }
    .pagination-item { min-width: 32px; height: 32px; font-size: 0.8125rem; }

    /* Tender/Exchange Cards */
    .tender-card { padding: 16px; }
    .exchange-card { padding: 16px; }

    /* AI Consultant */
    .ai-chat {
        height: calc(100vh - 160px); min-height: 300px;
        border-radius: 0; border-left: none; border-right: none;
    }
    .ai-chat-header { padding: 12px 16px; }
    .ai-brief-body { padding: 16px; }
}

/* --- Small Phone (480px) --- */
@media (max-width: 480px) {

    /* Typography — responsive clamp */
    .text-display { font-size: clamp(1.75rem, 5vw, 3rem); }
    .text-heading { font-size: clamp(1.125rem, 3.5vw, 1.5rem); }

    /* Modal — tighter */
    .modal { border-radius: var(--radius-md); }
    .modal-footer { padding: 10px 12px; gap: 8px; }

    /* Tabs — horizontal scroll */
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { padding: 8px 12px; font-size: 0.8125rem; white-space: nowrap; }

    /* Avatar XL */
    .avatar-xl { width: 64px; height: 64px; font-size: 1.25rem; }

    /* Kanban tighter */
    .kanban-column-body { max-height: 250px; }
    .kanban-card { padding: 10px; }

    /* Toast safe-area offset */
    .toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    .notif-toast { top: env(safe-area-inset-top, 12px); right: 8px; left: 8px; min-width: 0; }
}

/* --- Extended touch targets --- */
@media (pointer: coarse) {
    .pagination-item { min-height: 44px; min-width: 44px; }
    .accordion-trigger { min-height: 48px; }
    .chat-conversation-item { min-height: 56px; }
    .modal-close { width: 44px; height: 44px; }
}

/* ================================================================
   MOBILE BOTTOM NAV — Universal design-system component
   Shows on mobile (≤768px), replaces desktop top nav.
   Works on any page: landing, app, admin.

   Structure (backdrop/sheet OUTSIDE .mobile-bottom-nav to avoid
   backdrop-filter containing block issue):
     .mobile-bottom-nav-wrap (Alpine scope wrapper)
       .mobile-bottom-nav-sheet-backdrop(.visible)
       .mobile-bottom-nav-sheet(.open)
         .mobile-bottom-nav-sheet-handle
         .mobile-bottom-nav-sheet-item(.active)
       .mobile-bottom-nav
         .mobile-bottom-nav-item(.active)
           svg/icon
           .mobile-bottom-nav-label
         .mobile-bottom-nav-item (more btn)
   ================================================================ */

/* Wrapper — Alpine.js scope container (invisible, no layout impact) */
.mobile-bottom-nav-wrap {
    display: contents;
}

/* Container — fixed bottom bar */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color-bg-primary);
    border-top: 1px solid var(--color-border);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Show on mobile only */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
}

/* Nav item — flex column, icon + label */
.mobile-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    min-height: 48px;
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.mobile-bottom-nav-item:hover {
    color: var(--color-text-secondary);
}
.mobile-bottom-nav-item:active {
    opacity: 0.7;
}
.mobile-bottom-nav-item.active {
    color: var(--color-accent-cyan);
}
/* Active indicator dot */
.mobile-bottom-nav-item.active::after {
    content: '';
    position: absolute;
    top: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent-cyan);
}
.mobile-bottom-nav-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.mobile-bottom-nav-label {
    font-size: 0.625rem;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 72px;
}

/* Badge on nav item (e.g. notification count) */
.mobile-bottom-nav-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 16px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--color-error);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* "More" sheet — backdrop */
.mobile-bottom-nav-sheet-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.mobile-bottom-nav-sheet-backdrop.visible {
    display: block;
}

/* "More" sheet — slide-up panel */
.mobile-bottom-nav-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: var(--color-bg-primary);
    border-top-left-radius: var(--radius-xl, 16px);
    border-top-right-radius: var(--radius-xl, 16px);
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    visibility: hidden;
}
.mobile-bottom-nav-sheet.open {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

/* Drag handle */
.mobile-bottom-nav-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    margin: 4px auto 12px;
}

/* Sheet menu item */
.mobile-bottom-nav-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: var(--radius-md, 8px);
    min-height: 44px;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    font: inherit;
    cursor: pointer;
}
.mobile-bottom-nav-sheet-item:hover {
    background: var(--color-bg-tertiary);
}
.mobile-bottom-nav-sheet-item:active {
    background: var(--color-bg-tertiary);
    opacity: 0.8;
}
.mobile-bottom-nav-sheet-item.active {
    color: var(--color-accent-cyan);
    background: rgba(var(--color-accent-cyan-rgb, 0, 210, 211), 0.08);
}
.mobile-bottom-nav-sheet-item svg {
    width: 20px;
    height: 20px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.mobile-bottom-nav-sheet-item.active svg {
    color: var(--color-accent-cyan);
}
.mobile-bottom-nav-sheet-item span {
    font-size: 0.875rem;
}

/* Sheet section divider */
.mobile-bottom-nav-sheet-divider {
    height: 1px;
    background: var(--color-border);
    margin: 8px 0;
}

/* Sheet section title */
.mobile-bottom-nav-sheet-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: 8px 8px 4px;
}

/* Compact sheet on short screens (iPhone SE = 667px) */
@media (max-height: 700px) {
    .mobile-bottom-nav-sheet { padding: 4px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .mobile-bottom-nav-sheet-handle { margin: 2px auto 6px; }
    .mobile-bottom-nav-sheet-item { padding: 8px 8px; min-height: 36px; gap: 10px; }
    .mobile-bottom-nav-sheet-divider { margin: 4px 0; }
    .mobile-bottom-nav-sheet-title { padding: 4px 8px 2px; }
}

/* Theme-aware logo: show dark-bg logo when dark, light-bg logo when light */
.logo-for-dark { display: block; }
.logo-for-light { display: none; }
[data-theme^="light"] .logo-for-dark { display: none; }
[data-theme^="light"] .logo-for-light { display: block; }

/* ================================================================
   81. CMS EDITOR COMPONENTS (SEO preview, Markdown preview, toolbar)
   ================================================================ */

/* Google SERP preview card — SERP preview: intentional hardcoded colors (simulates real Google) */
.seo-google-preview {
    background: #fff;
    border: 1px solid #dfe1e5;
    border-radius: 12px;
    padding: 20px;
    max-width: 600px;
}
.seo-google-preview__label {
    font-size: 0.75rem;
    color: #70757a;
    margin-bottom: 12px;
}
.seo-google-preview__title {
    font-size: 1.2rem;
    font-weight: 400;
    color: #1a0dab;
    margin-bottom: 4px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seo-google-preview__url {
    font-size: 0.85rem;
    color: #202124;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.seo-google-preview__url span {
    color: #4d5156;
}
.seo-google-preview__description {
    font-size: 0.875rem;
    color: #4d5156;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CMS Markdown preview — rendered article content */
.cms-preview h1 { font-size: 1.8rem; font-weight: 700; margin: 0 0 16px; color: var(--color-text-primary); }
.cms-preview h2 { font-size: 1.4rem; font-weight: 600; margin: 24px 0 12px; color: var(--color-text-primary); }
.cms-preview h3 { font-size: 1.15rem; font-weight: 600; margin: 20px 0 8px; color: var(--color-text-primary); }
.cms-preview p { margin: 0 0 12px; line-height: 1.7; color: var(--color-text-secondary); }
.cms-preview a { color: var(--color-accent-cyan); text-decoration: underline; }
.cms-preview strong { color: var(--color-text-primary); }
.cms-preview ul, .cms-preview ol { margin: 0 0 12px; padding-left: 24px; color: var(--color-text-secondary); }
.cms-preview li { margin-bottom: 4px; line-height: 1.6; }
.cms-preview blockquote { border-left: 3px solid var(--color-accent-cyan); padding: 8px 16px; margin: 12px 0; background: var(--color-bg-secondary); border-radius: 0 8px 8px 0; }
.cms-preview code { background: var(--color-bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.cms-preview pre { background: var(--color-bg-tertiary); padding: 16px; border-radius: 8px; overflow-x: auto; margin: 12px 0; }
.cms-preview pre code { background: none; padding: 0; }
.cms-preview img { max-width: 100%; border-radius: 8px; margin: 12px 0; }
.cms-preview hr { border: none; border-top: 1px solid var(--color-border); margin: 24px 0; }

/* CMS Editor Layout — split panels (editor + preview) */
.cms-editor-split {
    display: flex;
    height: calc(100vh - 64px);
    overflow: hidden;
}
.cms-editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cms-editor-panel--border-right {
    border-right: 1px solid var(--color-border);
}
.cms-editor-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.cms-editor-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cms-editor-header__right {
    display: flex;
    gap: 6px;
}
.cms-editor-header__title {
    font-size: 1.1rem;
    margin: 0;
}
.cms-editor-tabs {
    padding: 0 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 0;
    flex-shrink: 0;
}
.cms-editor-tab {
    border-radius: 0;
    border-bottom: 2px solid transparent;
}
.cms-editor-tab.active {
    border-bottom-color: var(--color-accent-cyan);
}
.cms-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.cms-editor-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.cms-editor-footer__actions {
    display: flex;
    gap: 8px;
}
.cms-editor-preview-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.cms-editor-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.cms-md-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.cms-md-textarea {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
}
.cms-cover-preview img {
    max-height: 120px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.cms-cover-preview--full img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: var(--radius-md);
}
.cms-form-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}
.cms-form-grid--2 { grid-template-columns: 1fr 1fr; }
.cms-form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.cms-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success);
    margin-left: 4px;
}
.cms-preview-title {
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: var(--color-text-primary);
}
.cms-html-preview {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Utility: hide element on mobile */
@media (max-width: 768px) {
    .hide-on-mobile { display: none !important; }
}
/* Utility: show element only on mobile */
.show-on-mobile { display: none !important; }
@media (max-width: 768px) {
    .show-on-mobile { display: flex !important; }
    .show-on-mobile-block { display: block !important; }
    .show-on-mobile-inline { display: inline !important; }
}

} /* end @layer responsive */

@layer layout {
/* ================================================================
   LANDING LAYOUT OVERRIDES
   ================================================================ */
.layout-landing body,
body.landing-layout {
  overscroll-behavior: none;
}
.layout-landing,
.layout-landing body {
  scrollbar-width: none;
}
.layout-landing::-webkit-scrollbar,
.layout-landing body::-webkit-scrollbar {
  display: none;
}
.layout-landing section,
.layout-landing footer {
  position: relative;
  z-index: 2;
}

} /* end @layer layout */

@layer a11y {
/* ================================================================
   ACCESSIBILITY: 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;
  }
  .loader, .loader::after { animation: none !important; }
  .ds-reveal, .ds-reveal-left, .ds-reveal-right, .ds-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Landing effects */
  .scroll-progress { display: none; }
  .cursor-pacman, .pac-dot, #pacDots { display: none; }
  .layout-landing body, body.landing-layout { cursor: auto !important; }
  .particles-canvas { display: none; }
}
} /* end @layer a11y */

/* ================================================================
   Sprint 2 additions (unlayered — highest priority)
   ================================================================ */

/* exchange-meta — flex-враппер для Бюджет/Площадь/Дедлайн в exchange-card
   Демо b2b-exchange.php использует .exchange-meta (flex);
   .exchange-card-meta — grid-вариант, оба поддерживаются.
   ================================================================ */
.exchange-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-bg-tertiary);
  margin-bottom: 10px;
}

/* Match score badge — % совпадения в sidebar тендеров
   ================================================================ */
.badge-match {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
  color: var(--color-info);
  border: 1px solid color-mix(in srgb, var(--color-info) 30%, transparent);
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
}

/* Маркетплейс layout — filter sidebar + grid
   ================================================================ */
.marketplace-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.marketplace-filter {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
}
.marketplace-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
@media (max-width: 768px) {
  .marketplace-layout { flex-direction: column; }
  .marketplace-filter { width: 100%; position: static; }
}

/* Тендеры layout — table + recommendation sidebar
   ================================================================ */
.tenders-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.tenders-main {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
.tenders-sidebar {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 900px) {
  .tenders-layout { flex-direction: column; }
  .tenders-sidebar { width: 100%; }
}

/* Tenders compact table — compact padding + font, no fixed layout
   ================================================================ */
.tenders-table {
  font-size: 0.8rem;
  width: 100%;
}
.tenders-table th {
  font-size: 0.7rem;
  padding: 7px 8px;
  white-space: nowrap;
}
.tenders-table td {
  padding: 7px 8px;
  vertical-align: middle;
}
.tenders-table .col-id {
  width: 40px;
  white-space: nowrap;
}
.tenders-table .col-budget,
.tenders-table .col-deadline {
  white-space: nowrap;
}
.tenders-table .col-actions {
  white-space: nowrap;
  width: 80px;
}