/* Base stylesheet — Phase 01 foundation only. Component visual language
   (colors/type/radius/spacing) is taken from tokens.css per the locked
   DESIGN_SYSTEM.md. Modal/toast/empty/error states have no reference
   screenshot (documented in DESIGN_SYSTEM.md §12) so their styling here is
   original work applying the same tokens, not a copy of anything shown. */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-page);
  color: var(--color-text-body);
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2) 0;
}

a { color: inherit; }

.eyebrow {
  display: block;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-orange-solid);
  margin-bottom: var(--space-2);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.65rem 1.25rem;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s ease, background-color 0.15s ease;
}
.btn:focus-visible {
  outline: 3px solid var(--color-info-text);
  outline-offset: 2px;
}
.btn-primary {
  color: var(--color-text-heading);
  background: linear-gradient(90deg, var(--color-accent-orange-start), var(--color-accent-orange-end));
}
.btn-primary:hover { filter: brightness(1.04); }
.btn-secondary {
  color: var(--color-text-on-dark);
  background: var(--color-brand-dark);
}
.btn-secondary:hover { background: var(--color-brand-dark-hover); }
.btn-outline {
  color: var(--color-text-heading);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
}
.btn-outline:hover { background: var(--color-neutral-bg); }
.btn-danger-link {
  background: none;
  color: var(--color-danger-text);
  padding: 0;
  font-weight: var(--font-weight-medium);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon {
  padding: 0.5rem;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* ---------- Card ---------- */
.card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.65rem;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-info { background: var(--color-info-bg); color: var(--color-info-text); }
.badge-neutral { background: var(--color-neutral-bg); color: var(--color-neutral-text); }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-weight: var(--font-weight-semibold); font-size: var(--font-size-small); color: var(--color-text-heading); }
.field input, .field select, .field textarea {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-input);
  padding: 0.6rem 0.8rem;
  font-size: var(--font-size-body);
  font-family: inherit;
  background: var(--color-surface-card);
  color: var(--color-text-heading);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--color-info-text);
  outline-offset: 1px;
}
.field .error-text { color: var(--color-danger-text); font-size: var(--font-size-small); }
.field .help-text { color: var(--color-text-muted); font-size: var(--font-size-small); margin: 0; }

/* ---------- Stat card ---------- */
.stat-card .stat-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}
.stat-card .stat-value {
  font-size: var(--font-size-stat);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin: var(--space-1) 0;
}
.stat-card .stat-help { font-size: var(--font-size-small); color: var(--color-text-muted); }

/* ---------- Progress bar ---------- */
.progress-track {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-bg);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--color-brand-dark);
  border-radius: var(--radius-pill);
}

/* ---------- Empty / Error states (original work, no reference exists) ---------- */
.state-panel {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-muted);
}
.state-panel h3 { color: var(--color-text-heading); margin-bottom: var(--space-2); }
.state-panel.state-error h3 { color: var(--color-danger-text); }
.state-panel-action { margin-top: var(--space-4); }

/* ---------- Loading skeleton ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--color-neutral-bg) 25%, #E9EDEC 37%, var(--color-neutral-bg) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: var(--radius-input);
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.skeleton-block { width: 100%; height: 80px; }
.skeleton-line { width: 100%; height: 14px; margin-bottom: var(--space-2); }
.skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-pill); }

/* ---------- Toast (original work, no reference exists) ---------- */
.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.toast {
  min-width: 260px;
  max-width: 360px;
  background: var(--color-brand-dark);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-card);
  font-size: var(--font-size-body);
}
.toast[data-variant="error"] { background: var(--color-danger-text); }
.toast[data-variant="success"] { background: var(--color-success-text); }
.toast-close {
  background: none;
  border: none;
  color: inherit;
  margin-left: var(--space-2);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}

/* ---------- Modal (original work, no reference exists) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 46, 43, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 900;
  padding: var(--space-4);
}
.modal-overlay[data-open="true"] { display: flex; }
.modal-panel {
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-card);
}
.modal-panel:focus { outline: none; }
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.modal-title { margin: 0; font-size: var(--font-size-h2); }
.modal-body { color: var(--color-text-body); }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  width: var(--sidebar-width);
  background: var(--color-surface-card);
  border-right: 1px solid var(--color-border-default);
  padding: var(--space-6) var(--space-4);
  flex-shrink: 0;
}
.app-sidebar .nav-group-label {
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-4) 0 var(--space-2) var(--space-2);
}
.app-sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem var(--space-3);
  border-radius: var(--radius-input);
  color: var(--color-text-heading);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
}
.app-sidebar .nav-item[data-active="true"] {
  background: var(--color-brand-dark);
  color: var(--color-text-on-dark);
}
.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
}
.app-main {
  flex: 1;
  padding: var(--space-6);
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
}

/* Mobile nav toggle (hidden by default on desktop) */
.mobile-nav-toggle { display: none; }
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14, 46, 43, 0.4);
  z-index: 80;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-brand-dark);
  color: var(--color-text-on-dark);
  padding: var(--space-2) var(--space-4);
  z-index: 1100;
  border-radius: 0 0 var(--radius-input) 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Shell layout helper classes ----------
   These replace what were previously inline `style={{...}}` attributes in
   the shell components. They were moved here because the shell's own
   security-headers middleware sends a strict `style-src 'self'` CSP with
   no `'unsafe-inline'` — confirmed via real headless-browser testing
   (Phase 01 App Shell slice), which showed inline styles being blocked by
   the browser. Rather than weaken the CSP, the shell's few inline styles
   were moved into real, reusable classes. */
.shell-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.breadcrumbs { margin-bottom: var(--space-2); }
.breadcrumbs-list {
  list-style: none;
  display: flex;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}
.breadcrumbs-item { display: flex; gap: 0.4rem; }
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.content-header-actions { display: flex; gap: var(--space-2); }
.content-title { font-size: var(--font-size-h2); }
.content-description { margin: 0; }
.navbar-left { display: flex; align-items: center; gap: 1rem; }
.navbar-right { display: flex; align-items: center; gap: 0.75rem; }
.navbar-context-label { color: var(--color-text-muted); font-size: var(--font-size-small); }
.navbar-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-default);
  color: var(--color-text-muted);
  background: var(--color-surface-card);
}
.nav-item-badge { margin-left: auto; }
.skeleton-title { height: 20px; width: 220px; margin: 0 auto 12px; }
.skeleton-subtitle { height: 14px; width: 300px; margin: 0 auto; }

/* Standard visually-hidden-but-accessible utility (used instead of an
   inline clip-rect style, for the same CSP reason as above). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Progress bar (native <progress> element — see ProgressBar.tsx
   for why: CSP disallows the inline width-percentage a custom div bar
   would need) ---------- */
.progress {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  border: none;
  appearance: none;
  -webkit-appearance: none;
}
.progress::-webkit-progress-bar {
  background: var(--color-neutral-bg);
  border-radius: var(--radius-pill);
}
.progress::-webkit-progress-value {
  background: var(--color-brand-dark);
  border-radius: var(--radius-pill);
}
.progress::-moz-progress-bar {
  background: var(--color-brand-dark);
  border-radius: var(--radius-pill);
}

/* ---------- Responsive foundation ---------- */
/* Mobile (<= breakpoint-mobile) */
@media (max-width: 480px) {
  .app-main { padding: var(--space-4); }
  .stat-grid { grid-template-columns: 1fr; }
  .app-topbar { padding: var(--space-3) var(--space-4); }
  .navbar-right { gap: 0.4rem; }
  .navbar-secondary-action { display: none; }
  .navbar-context-label { display: none; }
}

/* Up to tablet: collapse the sidebar behind a toggle, as a slide-in drawer */
@media (max-width: 768px) {
  .app-shell { flex-direction: column; }
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    border-right: 1px solid var(--color-border-default);
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    display: block;
  }
  .app-sidebar[data-mobile-open="true"] {
    transform: translateX(0);
  }
  .sidebar-overlay[data-open="true"] {
    display: block;
  }
  .mobile-nav-toggle {
    display: inline-flex;
  }
}

/* Tablet */
@media (min-width: 481px) and (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Laptop and up */
@media (min-width: 1025px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Large desktop */
@media (min-width: 1536px) {
  .app-main { max-width: 1440px; }
}

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

.card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* =====================================================================
   Phase 02 — Authentication UI, brand logo, sidebar footer, account pages.
   Built only from tokens.css values. Auth layout follows the written
   inventory in DESIGN_SYSTEM.md §8 (split screen, dark brand panel, white
   form panel, pale-lavender borderless inputs per §2/§5.6). The stacked
   mobile layout is original responsive work (no mobile reference, §11).
   ===================================================================== */

/* ---------- Brand logo (DESIGN_SYSTEM.md §1.1) ---------- */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}
.brand-mark { flex-shrink: 0; display: block; }
.brand-mark-circle { fill: var(--color-brand-dark); }
.brand-mark[data-tone="dark-bg"] .brand-mark-circle { fill: var(--color-accent-orange-solid); }
.brand-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-weight: var(--font-weight-black);
  font-size: 1.125rem;
  color: var(--color-text-heading);
}
.brand-sub {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}
.brand-logo[data-tone="dark-bg"] .brand-name { color: var(--color-text-on-dark); }
.brand-logo[data-tone="dark-bg"] .brand-sub { color: var(--color-text-on-dark-muted); }

/* ---------- Sidebar: logo on top, "Log out" pinned to the bottom ---------- */
.app-sidebar { display: flex; flex-direction: column; }
.sidebar-brand { padding: 0 var(--space-2) var(--space-4); }
.sidebar-groups { flex: 1; }
.sidebar-footer {
  border-top: 1px solid var(--color-border-default);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
}
.app-sidebar .nav-logout {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
  color: var(--color-text-body);
}
.app-sidebar .nav-logout:hover { background: var(--color-neutral-bg); }
.app-sidebar .nav-logout:focus-visible,
.app-sidebar .nav-item:focus-visible {
  outline: 3px solid var(--color-info-text);
  outline-offset: 1px;
}
@media (max-width: 768px) {
  .app-sidebar { display: flex; }
}

/* ---------- Auth layout ---------- */
.auth-body { background: var(--color-surface-card); }
.auth-layout {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) 7fr;
  min-height: 100vh;
}
.auth-brand-panel {
  background: var(--color-brand-dark);
  color: var(--color-text-on-dark);
  padding: var(--space-12) var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
}
.auth-brand-copy { max-width: 420px; }
.auth-brand-title {
  color: var(--color-text-on-dark);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-black);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
.auth-brand-text { color: var(--color-text-on-dark-muted); margin: 0 0 var(--space-6); }
.auth-brand-points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.auth-brand-points li { display: flex; gap: var(--space-3); align-items: flex-start; }
.auth-brand-points svg { color: var(--color-accent-orange-start); flex-shrink: 0; margin-top: 2px; }
.auth-brand-foot { color: var(--color-text-on-dark-muted); font-size: var(--font-size-small); margin: 0; }

.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  background: var(--color-surface-card);
}
.auth-form-panel:focus { outline: none; }
.auth-form-wrap { width: 100%; max-width: 440px; }
.auth-mobile-logo { display: none; margin-bottom: var(--space-6); }

.auth-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-neutral-bg);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin-bottom: var(--space-6);
}
.auth-toggle-item {
  text-align: center;
  padding: 0.5rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  color: var(--color-text-body);
}
.auth-toggle-item[aria-current="page"] {
  background: var(--color-surface-card);
  color: var(--color-text-heading);
  box-shadow: var(--shadow-card);
}
.auth-toggle-item:focus-visible { outline: 3px solid var(--color-info-text); outline-offset: 1px; }

.auth-title { font-size: 1.75rem; font-weight: var(--font-weight-black); margin-bottom: var(--space-2); }
.auth-subtitle { margin: 0 0 var(--space-6); }

.auth-google { margin-bottom: var(--space-4); }
.auth-google-btn { width: 100%; padding: 0.75rem 1.25rem; }
.auth-google-note { margin-top: var(--space-2); text-align: center; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin: var(--space-4) 0 var(--space-6);
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border-default); }

/* Auth inputs: filled pale lavender, no visible border (DESIGN_SYSTEM.md §5.6) */
.auth-field input {
  background: var(--color-input-bg);
  border-color: transparent;
}
.auth-field input:focus { background: var(--color-surface-card); }
.auth-field input[aria-invalid="true"],
.field input[aria-invalid="true"] { border-color: var(--color-danger-text); }
.auth-input-wrap { position: relative; display: flex; }
.auth-input-wrap input { flex: 1; min-width: 0; }
.auth-input-wrap:has(.auth-reveal) input { padding-right: 4.5rem; }
.auth-reveal {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--color-brand-dark);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-input);
  cursor: pointer;
}
.auth-reveal:focus-visible { outline: 3px solid var(--color-info-text); }

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.auth-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-text-heading);
  cursor: pointer;
  margin-bottom: var(--space-4);
}
.auth-row .auth-check { margin-bottom: 0; }
.auth-check input { width: 16px; height: 16px; accent-color: var(--color-brand-dark); margin: 0; }
.auth-link, .auth-switch a {
  color: var(--color-brand-dark);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-small);
}
.auth-submit { width: 100%; padding: 0.8rem 1.25rem; }
.auth-switch { text-align: center; margin: var(--space-6) 0 0; font-size: var(--font-size-small); }

/* Role selector "choice cards" (DESIGN_SYSTEM.md §5.6) */
.role-picker { border: none; padding: 0; margin: 0 0 var(--space-6); }
.role-picker legend {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-small);
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
  padding: 0;
}
.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.role-picker legend { grid-column: 1 / -1; }
.role-picker .error-text { grid-column: 1 / -1; color: var(--color-danger-text); font-size: var(--font-size-small); margin: 0; }
.role-card {
  position: relative;
  display: block;
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  cursor: pointer;
  background: var(--color-surface-card);
}
.role-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.role-card-body { display: flex; flex-direction: column; gap: 2px; }
.role-card-title { font-weight: var(--font-weight-bold); color: var(--color-text-heading); font-size: var(--font-size-body); }
.role-card-text { font-size: var(--font-size-small); color: var(--color-text-body); }
.role-card:has(input:checked) { border-color: var(--color-brand-dark); background: var(--color-bg-hero-mint); }
.role-card:has(input:focus-visible) { outline: 3px solid var(--color-info-text); outline-offset: 2px; }

/* Form-level alert (error / success) */
.form-alert {
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-small);
  margin: 0 0 var(--space-4);
  background: #FEF2F2;
  color: var(--color-danger-text);
}
.form-alert[data-variant="success"] { background: var(--color-success-bg); color: var(--color-success-text); }
.form-alert[hidden] { display: none; }
.form-alert:focus { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- Account pages ---------- */
.workspace-stack { display: grid; gap: var(--space-4); }
.card-heading { font-size: var(--font-size-card-title); margin-bottom: var(--space-2); }
.card-text { margin: 0 0 var(--space-4); }
.notice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-left: 4px solid var(--color-accent-orange-solid);
}
.notice-card-body { flex: 1 1 320px; min-width: 0; }
.notice-card .card-text { margin-bottom: 0; }
.notice-card .form-alert { margin: var(--space-3) 0 0; }
.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 var(--space-6); }
.detail-list dt { font-size: var(--font-size-small); color: var(--color-text-muted); margin-bottom: 2px; }
.detail-list dd { margin: 0; color: var(--color-text-heading); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); align-items: start; }
.admin-placeholder { min-height: 100vh; }

/* ---------- Dev outbox (development only) ---------- */
.dev-outbox { max-width: 860px; margin: 0 auto; padding: var(--space-8) var(--space-4); }
.dev-outbox-item { margin-bottom: var(--space-4); }
.dev-outbox-meta { font-size: var(--font-size-small); color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.dev-outbox-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; }

/* ---------- Auth responsive ---------- */
@media (max-width: 1024px) {
  .auth-brand-panel { padding: var(--space-8); }
}
@media (max-width: 768px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand-panel { display: none; }
  .auth-mobile-logo { display: block; }
  .auth-form-panel { align-items: flex-start; padding: var(--space-8) var(--space-4); }
}
@media (max-width: 420px) {
  .role-picker { grid-template-columns: 1fr; }
}
.auth-google-note { font-size: var(--font-size-small); color: var(--color-text-muted); margin: var(--space-2) 0 0; }
.field .error-text { margin: 0; }

/* ---------- Phase 03: workspace switcher, admin console ---------- */
.app-sidebar .nav-switch {
  width: 100%;
  background: var(--color-bg-hero-mint);
  border: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
  margin-bottom: var(--space-2);
  color: var(--color-brand-dark);
  font-weight: var(--font-weight-semibold);
}
.app-sidebar .nav-switch:hover { filter: brightness(0.97); }
.app-sidebar .nav-switch:focus-visible { outline: 3px solid var(--color-info-text); outline-offset: 1px; }

.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-body); }
.data-table th {
  text-align: left;
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  white-space: nowrap;
}
.data-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-heading);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .muted { color: var(--color-text-muted); font-size: var(--font-size-small); }
.data-table a { font-weight: var(--font-weight-semibold); color: var(--color-brand-dark); }
.badge-row { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.badge-danger { background: #FEE2E2; color: var(--color-danger-text); }

.filter-bar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--space-4); }
.filter-bar .field { margin-bottom: 0; flex: 1 1 180px; min-width: 0; }
.filter-bar .field input, .filter-bar .field select { width: 100%; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }

.inline-form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-end; }
.inline-form .field { margin-bottom: 0; flex: 1 1 200px; min-width: 0; }
.inline-form .field input, .inline-form .field select { width: 100%; }
.role-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.role-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-input); }
.btn-small { padding: 0.35rem 0.85rem; font-size: var(--font-size-small); }
.btn-danger { background: var(--color-danger-text); color: #fff; }
.audit-meta { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: var(--color-text-body); overflow-wrap: anywhere; }

/* =====================================================================
   Phases 04–06 — profiles, find freelancers, public pages.
   Mirrors the reference "My profile" screen (DESIGN_SYSTEM.md §10): cover
   banner, identity row, portfolio grid with gradient tiles, right column
   of skills/languages/education/certifications.
   ===================================================================== */
.muted { color: var(--color-text-muted); font-size: var(--font-size-small); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--color-bg-hero-mint); color: var(--color-brand-dark);
  font-weight: var(--font-weight-bold); font-size: var(--font-size-small); flex-shrink: 0;
}
.avatar-xl { width: 88px; height: 88px; font-size: 1.75rem; border: 4px solid var(--color-surface-card); }

.profile { display: grid; gap: var(--space-4); }
.profile-hero { padding: 0; overflow: hidden; }
.profile-cover {
  height: 140px;
  background:
    radial-gradient(circle at 15% 120%, var(--color-accent-orange-end) 0 28%, transparent 29%),
    radial-gradient(circle at 70% -10%, var(--color-accent-orange-start) 0 30%, transparent 31%),
    linear-gradient(120deg, var(--color-brand-dark), #1F6B5E 55%, #2FB59A);
}
.profile-identity { display: flex; align-items: flex-end; gap: var(--space-4); padding: 0 var(--space-6); margin-top: -44px; flex-wrap: wrap; }
.profile-identity-text { flex: 1 1 260px; min-width: 0; padding-top: 48px; }
.profile-name { margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.profile-handle { margin: 2px 0 0; color: var(--color-text-body); overflow-wrap: anywhere; }
.profile-rate { padding-top: 48px; font-size: 1.25rem; font-weight: var(--font-weight-bold); color: var(--color-text-heading); }
.profile-bio { padding: 0 var(--space-6); margin: var(--space-4) 0 0; white-space: pre-line; color: var(--color-text-body); }
.profile-meta { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-6) var(--space-6); margin: 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
.profile-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.profile-main, .profile-side { display: grid; gap: var(--space-4); }

.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }
.portfolio-tile { border: 1px solid var(--color-border-default); border-radius: var(--radius-input); overflow: hidden; background: var(--color-surface-card); }
.portfolio-thumb { height: 96px; }
.thumb-0 { background: linear-gradient(135deg, #1F5F55, #8FC1B5); }
.thumb-1 { background: linear-gradient(135deg, #F0A94A, #F7D8B0); }
.thumb-2 { background: linear-gradient(135deg, #0E2E2B, #6E9F96); }
.thumb-3 { background: linear-gradient(135deg, #3E9C7E, #A7D8C3); }
.thumb-4 { background: linear-gradient(135deg, #2E5D67, #E9B98A); }
.thumb-5 { background: linear-gradient(135deg, #E9812F, #F3C9A2); }
.portfolio-body { padding: var(--space-3); }
.portfolio-title { font-size: var(--font-size-body); margin: 0; }
.portfolio-title a { color: var(--color-text-heading); }
.portfolio-desc { font-size: var(--font-size-small); margin: var(--space-1) 0 0; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-4); border-left: 2px solid var(--color-border-default); display: grid; gap: var(--space-4); }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: calc(-1 * var(--space-4) - 6px); top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-brand-dark); }
.timeline-sub { display: block; color: var(--color-accent-orange-end); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
.timeline p { margin: var(--space-1) 0 0; font-size: var(--font-size-small); }

.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; }
.chip { background: var(--color-bg-hero-mint); color: var(--color-brand-dark); border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; font-size: var(--font-size-small); font-weight: var(--font-weight-medium); }
.kv-list { margin: 0; display: grid; gap: var(--space-2); }
.kv-list > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.kv-list dt { color: var(--color-text-heading); font-weight: var(--font-weight-medium); }
.kv-list dd { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-small); text-align: right; }
.stack-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.stack-list li { display: flex; flex-direction: column; }

.strength-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.strength-card .progress { width: 100%; margin: var(--space-2) 0 var(--space-3); }
.todo-list { margin: 0 0 var(--space-4); padding-left: 1.2rem; color: var(--color-text-body); font-size: var(--font-size-small); }
.publish-card { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.publish-card > div { flex: 1 1 280px; }
.publish-card .card-text { margin: 0; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--space-4); }
.stack-form .field input, .stack-form .field select, .stack-form .field textarea { width: 100%; }
.field textarea { resize: vertical; font-family: inherit; }
.field input:disabled { background: var(--color-neutral-bg); color: var(--color-text-muted); }

.public-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border-default); background: var(--color-surface-card); flex-wrap: wrap; }
.public-nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.public-nav a:not(.btn) { color: var(--color-text-heading); text-decoration: none; font-weight: var(--font-weight-medium); font-size: var(--font-size-small); }
.public-main { max-width: 1200px; margin: 0 auto; padding: var(--space-6); }
.public-main > h1 { font-size: var(--font-size-h2); }

.talent-card { display: flex; flex-direction: column; gap: var(--space-3); }
.talent-head { display: flex; gap: var(--space-3); align-items: center; }
.talent-name { font-size: var(--font-size-body); margin: 0; }
.talent-name a { color: var(--color-text-heading); text-decoration: none; }
.talent-name a:hover { text-decoration: underline; }
.talent-head p { margin: 0; }
.talent-headline { margin: 0; font-size: var(--font-size-small); color: var(--color-text-body); }
.talent-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border-default); }
.filter-bar.card { padding: var(--space-4); }

@media (max-width: 900px) {
  .profile-columns { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .profile-identity, .profile-bio, .profile-meta { padding-left: var(--space-4); padding-right: var(--space-4); }
  .profile-rate, .profile-identity-text { padding-top: 0; }
  .public-main { padding: var(--space-4); }
}

/* =====================================================================
   Batch 2 — Phases 07–08: services, packages, job wizard, proposals.
   Token-only; layouts follow the reference homepage package cards, the
   "Post a job" stepper and "My jobs" table.
   ===================================================================== */
.action-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.action-form { display: inline-flex; flex-direction: column; gap: var(--space-1); }
.action-form .form-alert { margin: 0; }
.card-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }

/* Service cards (reference: "Fixed-scope packages ready to book") */
.service-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.service-thumb { display: flex; align-items: flex-end; height: 120px; padding: var(--space-3); text-decoration: none; }
.service-thumb-label {
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-heading);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.service-body { padding: var(--space-4) var(--space-4) 0; flex: 1; }
.service-title { font-size: var(--font-size-body); margin: 0 0 var(--space-1); }
.service-title a { color: var(--color-text-heading); text-decoration: none; }
.service-title a:hover { text-decoration: underline; }
.service-foot { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-default); margin-top: var(--space-3); }

.service-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; }
.package-list { display: grid; gap: var(--space-4); }
.package-card .btn { width: 100%; }
.package-card .action-form { display: flex; }
.package-price { font-size: var(--font-size-stat); font-weight: var(--font-weight-black); color: var(--color-text-heading); margin: 0 0 var(--space-2); }
.package-facts { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; gap: var(--space-4); color: var(--color-text-body); font-size: var(--font-size-small); }
.package-fieldset { border: 1px solid var(--color-border-default); border-radius: var(--radius-card); padding: var(--space-4); margin: 0 0 var(--space-4); }
.package-fieldset legend { font-weight: var(--font-weight-bold); color: var(--color-text-heading); padding: 0 var(--space-2); }

/* Stepper (reference: Post a job — Basics · Scope · Budget · Review) */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.stepper-item, .stepper-item a { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-semibold); font-size: var(--font-size-small); color: var(--color-text-muted); text-decoration: none; }
.stepper-item { padding-top: var(--space-2); border-top: 3px solid var(--color-border-default); }
.stepper-item[data-state="done"] { border-top-color: var(--color-brand-dark); }
.stepper-item[data-state="done"], .stepper-item[data-state="done"] a { color: var(--color-text-heading); }
.stepper-item[data-state="current"] { border-top-color: var(--color-accent-orange-end); color: var(--color-text-heading); }
.stepper-dot { width: 24px; height: 24px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--color-neutral-bg); font-size: 0.75rem; flex-shrink: 0; }
.stepper-item[data-state="current"] .stepper-dot { background: linear-gradient(90deg, var(--color-accent-orange-start), var(--color-accent-orange-end)); color: var(--color-text-heading); }
.stepper-item[data-state="done"] .stepper-dot { background: var(--color-brand-dark); color: var(--color-text-on-dark); }

/* Tabs (status filters) */
.tab-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tab { padding: 0.4rem 0.95rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border-default); background: var(--color-surface-card); text-decoration: none; font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); }
.tab[aria-current="page"] { background: linear-gradient(90deg, var(--color-accent-orange-start), var(--color-accent-orange-end)); border-color: transparent; }
.tab:focus-visible { outline: 3px solid var(--color-info-text); outline-offset: 2px; }

/* Jobs & proposals */
.job-card .talent-name { margin: 0; }
.job-budget { margin: var(--space-2) 0; color: var(--color-text-heading); }
.job-excerpt { margin: 0 0 var(--space-3); }
.proposal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.proposal-item { border: 1px solid var(--color-border-default); border-radius: var(--radius-card); padding: var(--space-4); }
.proposal-item .talent-head { justify-content: space-between; }
.proposal-terms { margin: var(--space-2) 0; color: var(--color-text-heading); }

@media (max-width: 900px) {
  .service-detail { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stepper { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-3); }
}

/* =====================================================================
   Batch 3 — Phases 09–14: orders, checkout, messages, earnings.
   ===================================================================== */
.stepper-5 { grid-template-columns: repeat(5, 1fr); margin-bottom: var(--space-4); }
.progress-cell { min-width: 120px; }
.progress-cell .progress { width: 100%; }
.link-list { margin: 0; padding-left: var(--space-4); overflow-wrap: anywhere; }
.test-mode-banner {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-small);
}

/* Messages (reference: inbox list + thread + compose bar) */
.inbox { display: grid; grid-template-columns: 300px minmax(0, 1fr); padding: 0; overflow: hidden; min-height: 520px; }
.inbox-list { border-right: 1px solid var(--color-border-default); overflow-y: auto; max-height: 70vh; }
.inbox-head { display: flex; flex-direction: column; padding: var(--space-4); border-bottom: 1px solid var(--color-border-default); }
.inbox-list ul { list-style: none; margin: 0; padding: 0; }
.inbox-item { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; color: inherit; border-bottom: 1px solid var(--color-border-default); }
.inbox-item[aria-current="true"] { background: var(--color-bg-hero-mint); }
.inbox-item:focus-visible { outline: 3px solid var(--color-info-text); outline-offset: -3px; }
.inbox-item-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.inbox-item-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--color-text-heading); }
.inbox-context { font-size: var(--font-size-small); color: var(--color-accent-orange-end); text-decoration: none; }
.inbox-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--font-size-small); }
.unread-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-accent-orange-end); flex-shrink: 0; }
.thread { display: flex; flex-direction: column; min-width: 0; background: var(--color-bg-page); }
.thread-head { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-default); background: var(--color-surface-card); }
.thread-head > div { display: flex; flex-direction: column; }
.thread-messages { list-style: none; margin: 0; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; overflow-y: auto; max-height: 55vh; }
.bubble { max-width: min(72%, 560px); background: var(--color-surface-card); border: 1px solid var(--color-border-default); border-radius: 14px; padding: var(--space-2) var(--space-3); align-self: flex-start; }
.bubble p { margin: 0; color: var(--color-text-heading); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble[data-from="me"] { align-self: flex-end; background: var(--color-brand-dark); border-color: var(--color-brand-dark); }
.bubble[data-from="me"] p, .bubble[data-from="me"] .bubble-time { color: var(--color-text-on-dark); }
.bubble[data-from="system"] { align-self: center; background: var(--color-neutral-bg); max-width: 90%; }
.bubble[data-from="system"] p { font-size: var(--font-size-small); color: var(--color-text-body); text-align: center; }
.bubble-time { display: block; font-size: 0.6875rem; color: var(--color-text-muted); margin-top: 2px; text-align: right; }
.thread-compose { display: flex; gap: var(--space-2); align-items: flex-end; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-default); background: var(--color-surface-card); flex-wrap: wrap; }
.thread-compose .form-alert { flex-basis: 100%; }
.thread-compose .field { flex: 1; margin: 0; min-width: 0; }
.thread-compose textarea { width: 100%; resize: vertical; }
.thread-empty { padding: var(--space-6); }

@media (max-width: 768px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox-list { border-right: none; border-bottom: 1px solid var(--color-border-default); max-height: 240px; }
  .stepper-5 { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-3); }
  .bubble { max-width: 88%; }
}

/* ---------- Phases 15–18: reviews, disputes, safety, notifications ---------- */
.stars { color: var(--color-accent-orange-end); letter-spacing: 1px; white-space: nowrap; }
.stars-empty { color: var(--color-border-default); }
.rating-summary { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--space-6); align-items: center; }
.rating-big { display: flex; flex-direction: column; gap: var(--space-1); }
.rating-big strong { font-size: 2.25rem; line-height: 1; color: var(--color-text-heading); }
.rating-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.rating-bars li { display: grid; grid-template-columns: 2.5rem 1fr 2rem; gap: var(--space-2); align-items: center; font-size: var(--font-size-small); }
.rating-bars .progress { width: 100%; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.review-item { border-top: 1px solid var(--color-border-default); padding-top: var(--space-3); }
.review-item:first-child { border-top: 0; padding-top: 0; }
.review-reply { margin: var(--space-2) 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-border-default); background: var(--color-neutral-bg); border-radius: var(--radius-input); font-size: var(--font-size-small); }
.report-link { font-size: var(--font-size-small); color: var(--color-text-muted); }
.report-link:hover { color: var(--color-danger-text); }
.talent-rating { margin: var(--space-1) 0 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
.profile-extra { margin-top: var(--space-6); }
.profile-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.disclosure > summary { cursor: pointer; font-weight: var(--font-weight-semibold); color: var(--color-text-heading); list-style: none; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: " ▾"; color: var(--color-text-muted); }
.disclosure[open] > summary { margin-bottom: var(--space-4); }
.disclosure[open] > summary::after { content: " ▴"; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { display: grid; grid-template-columns: 10px 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-top: 1px solid var(--color-border-default); }
.notif-item:first-child { border-top: 0; }
.notif-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--color-brand-dark); }
.notif-item[data-read="true"] .notif-dot { background: transparent; }
.notif-item[data-read="true"] .notif-text { color: var(--color-text-muted); }
.notif-text a { color: var(--color-text-heading); font-weight: var(--font-weight-medium); text-decoration: none; }
.notif-text a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .rating-summary { grid-template-columns: 1fr; gap: var(--space-3); }
  .notif-item { grid-template-columns: 10px 1fr; }
  .notif-item > form { grid-column: 2; }
}
.service-rating { font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); }
.service-rating::first-letter { color: var(--color-accent-orange-end); }

/* ---------- Phases 19–26: dashboards, homepage, footer, info pages ---------- */
.link-more { font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--color-brand-dark); white-space: nowrap; }
.quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dash-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .dash-grid { grid-template-columns: 3fr 2fr; } }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--color-border-default); }
.mini-list li:first-child { border-top: 0; }
.mini-list li > a { color: var(--color-text-heading); font-weight: var(--font-weight-medium); text-decoration: none; overflow-wrap: anywhere; }
.mini-list li > a:hover { text-decoration: underline; }
.mini-list li > .muted { grid-column: 1; font-size: var(--font-size-small); }
.mini-list li > .badge { grid-column: 2; grid-row: 1 / span 2; }

.btn-on-dark { color: var(--color-text-on-dark); background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.5); }
.btn-on-dark:hover { border-color: var(--color-text-on-dark); }
.accent-text { color: var(--color-accent-orange-end); }

.home { display: block; }
.home-hero { background: var(--color-bg-hero-mint); padding: var(--space-16) var(--space-6); }
.home-hero-inner { max-width: 820px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.home-hero h1 { font-size: clamp(2.1rem, 6vw, var(--font-size-hero)); line-height: 1.1; margin: 0; color: var(--color-text-heading); font-weight: var(--font-weight-black); letter-spacing: -0.02em; }
.home-lead { font-size: 1.0625rem; max-width: 620px; margin: 0; color: var(--color-text-body); }
.home-search { display: flex; width: 100%; max-width: 640px; gap: var(--space-2); background: var(--color-surface-card); padding: var(--space-2); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); border: 1px solid var(--color-border-default); }
.home-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 var(--space-4); font: inherit; font-size: 1rem; color: var(--color-text-heading); }
.home-search input:focus { outline: none; }
.home-search:focus-within { outline: 2px solid var(--color-brand-dark); outline-offset: 2px; }
.home-hero-links { display: flex; gap: var(--space-2); font-size: var(--font-size-small); }
.home-hero-links a { color: var(--color-brand-dark); font-weight: var(--font-weight-semibold); }
.home-stats { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-8); color: var(--color-text-body); font-size: var(--font-size-small); }
.home-stats strong { display: block; font-size: 1.5rem; color: var(--color-text-heading); }
.home-section { max-width: 1200px; margin: 0 auto; padding: var(--space-12) var(--space-6) 0; }
.home-section > h2, .section-head h2 { font-size: var(--font-size-h2); margin: 0 0 var(--space-6); color: var(--color-text-heading); letter-spacing: -0.01em; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.category-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.category-tile { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-surface-card); border: 1px solid var(--color-border-default); text-decoration: none; color: var(--color-text-body); height: 100%; transition: border-color 0.15s, transform 0.15s; }
.category-tile strong { color: var(--color-text-heading); font-size: var(--font-size-card-title); }
.category-tile .muted { font-size: var(--font-size-small); margin-top: auto; padding-top: var(--space-2); }
.category-tile:hover { border-color: var(--color-brand-dark); transform: translateY(-2px); }
.how-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.how-col { background: var(--color-surface-card); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); padding: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.how-col h3 { margin: 0; color: var(--color-text-heading); }
.how-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-3); }
.how-steps strong { color: var(--color-text-heading); }
.trust-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.trust-grid li { padding: var(--space-4) 0; border-top: 3px solid var(--color-accent-orange-solid); }
.trust-grid h3 { margin: 0 0 var(--space-2); color: var(--color-text-heading); font-size: var(--font-size-card-title); }
.trust-grid p { margin: 0; }
.home-cta { max-width: 1200px; margin: var(--space-12) auto 0; background: var(--color-brand-dark); color: var(--color-text-on-dark-muted); border-radius: var(--radius-card); padding: var(--space-12) var(--space-6); text-align: center; }
.home-cta h2 { color: var(--color-text-on-dark); font-size: var(--font-size-h2); margin: 0 0 var(--space-2); }
.home-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }

.site-footer { background: var(--color-footer-bg); color: var(--color-text-on-dark-muted); margin-top: var(--space-16); padding: var(--space-12) var(--space-6) var(--space-6); font-size: var(--font-size-small); }
.site-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; gap: var(--space-8); grid-template-columns: 2fr repeat(3, 1fr); }
.site-footer-brand p { max-width: 340px; }
.site-footer nav { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer h2 { color: var(--color-text-on-dark); font-size: var(--font-size-body); margin: 0 0 var(--space-1); }
.site-footer a { color: var(--color-text-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-text-on-dark); }
.site-footer-legal { max-width: 1200px; margin: var(--space-8) auto 0; padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.info-page { max-width: 760px; }
.info-page section { margin-top: var(--space-8); }
.info-page h2 { font-size: 1.25rem; color: var(--color-text-heading); }
@media (max-width: 768px) {
  .home-hero { padding: var(--space-12) var(--space-4); }
  .home-section { padding: var(--space-8) var(--space-4) 0; }
  .home-cta { margin: var(--space-8) var(--space-4) 0; padding: var(--space-8) var(--space-4); }
  .site-footer-inner { grid-template-columns: 1fr 1fr; }
  .site-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .home-search { flex-direction: column; border-radius: var(--radius-card); }
  .home-search input { padding: var(--space-3); }
}
@media (max-width: 560px) {
  .category-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .category-tile { padding: var(--space-3); }
  .category-tile strong { font-size: var(--font-size-body); }
  .category-tile > span:nth-of-type(1) { display: none; }
  .home-section > h2, .section-head h2 { font-size: 1.5rem; margin-bottom: var(--space-4); }
}

/* ---------- Batch 6: uploads, attachments, offers, avatars ---------- */
.avatar-img { object-fit: cover; padding: 0; background: var(--color-neutral-bg); }
.upload-field input[type="file"] { font: inherit; font-size: var(--font-size-small); max-width: 100%; }
.upload-field input[type="file"]::file-selector-button { font: inherit; font-weight: var(--font-weight-semibold); border: 1px solid var(--color-border-default); background: var(--color-surface-card); border-radius: var(--radius-pill); padding: 0.4rem 0.9rem; margin-right: var(--space-2); cursor: pointer; }
.upload-preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--color-border-default); }
.upload-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-small); }
.upload-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); background: var(--color-neutral-bg); border-radius: var(--radius-input); overflow-wrap: anywhere; }
.field-error-text { color: var(--color-danger-text); }
.file-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-size-small); }
.file-list li { display: flex; flex-direction: column; gap: var(--space-1); max-width: 220px; overflow-wrap: anywhere; }
.file-thumb img { display: block; width: 160px; max-width: 100%; height: 110px; object-fit: cover; border-radius: var(--radius-input); border: 1px solid var(--color-border-default); }
.file-link { font-weight: var(--font-weight-semibold); color: var(--color-brand-dark); }
.portfolio-img { width: 100%; object-fit: cover; display: block; }
.offer-card { background: var(--color-surface-card); border: 1px solid var(--color-border-default); border-left: 4px solid var(--color-accent-orange-solid); border-radius: var(--radius-input); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-body); text-align: left; }
.offer-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.offer-head .eyebrow { margin: 0; }
.offer-title { color: var(--color-text-heading); font-size: var(--font-size-card-title); }
.offer-desc { margin: 0; white-space: pre-line; }
.offer-terms { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-2) var(--space-4); margin: 0; justify-content: start; }
.offer-terms dt { font-size: var(--font-size-small); color: var(--color-text-muted); }
.offer-terms dd { margin: 0; font-weight: var(--font-weight-semibold); color: var(--color-text-heading); }
.offer-compose { margin-top: var(--space-4); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- Batch 7: levels, service covers, FAQ, extensions ---------- */
.level-badge { display: inline-flex; align-items: center; gap: 2px; padding: 0.1rem 0.55rem; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: var(--font-weight-bold); letter-spacing: 0.02em; background: var(--color-neutral-bg); color: var(--color-neutral-text); vertical-align: middle; white-space: nowrap; }
.level-badge[data-level="level1"] { background: var(--color-info-bg); color: var(--color-info-text); }
.level-badge[data-level="level2"] { background: var(--color-success-bg); color: var(--color-success-text); }
.level-badge[data-level="top"] { background: var(--color-warning-bg); color: var(--color-warning-text); }
.level-stats { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--font-size-small); color: var(--color-text-body); }
.level-stats strong { color: var(--color-text-heading); font-size: 1rem; margin-right: 2px; }
.service-thumb.has-cover { position: relative; background: var(--color-neutral-bg); overflow: hidden; }
.service-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-thumb.has-cover .service-thumb-label { position: relative; z-index: 1; }
.service-hero-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-card); border: 1px solid var(--color-border-default); }
.talent-head .action-form { margin-left: auto; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--color-border-default); padding: var(--space-3) 0; }
.faq-item:first-child { border-top: 0; padding-top: 0; }
.faq-item summary { cursor: pointer; font-weight: var(--font-weight-semibold); color: var(--color-text-heading); }
.faq-item p { margin: var(--space-2) 0 0; white-space: pre-line; }
.callout-card { border-left: 4px solid var(--color-accent-orange-solid); }

/* ---------- How to use guide ---------- */
.guide { max-width: 1100px; }
.guide-lead { font-size: 1.0625rem; max-width: 680px; }
.guide-toc { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-8); }
.guide section { margin-top: var(--space-12); scroll-margin-top: var(--space-6); }
.guide section > h2 { font-size: var(--font-size-h2); color: var(--color-text-heading); margin-bottom: var(--space-6); }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.guide-step { display: grid; grid-template-columns: minmax(240px, 2fr) 3fr; gap: var(--space-6); align-items: center; background: var(--color-surface-card); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); padding: var(--space-6); }
.guide-step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent-orange-end); color: #fff; font-weight: var(--font-weight-black); font-size: 1.1rem; margin-bottom: var(--space-2); }
.guide-step h3 { margin: 0 0 var(--space-2); color: var(--color-text-heading); font-size: 1.25rem; }
.guide-step p { margin: 0 0 var(--space-2); }
.guide-tip { background: var(--color-bg-hero-mint); border-radius: var(--radius-input); padding: var(--space-2) var(--space-3); font-size: var(--font-size-small); }
.guide-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-input); border: 1px solid var(--color-border-default); box-shadow: var(--shadow-card); }
.guide-safety ul { display: grid; gap: var(--space-2); padding-left: 1.25rem; }
@media (max-width: 768px) {
  .guide-step { grid-template-columns: 1fr; padding: var(--space-4); }
  .guide-step-text { order: 1; }
  .guide-shot { order: 2; }
}
.duitnow-grid { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: center; margin-top: var(--space-4); }
.duitnow-qr { margin: 0; text-align: center; }
.duitnow-qr img { width: 240px; max-width: 100%; height: auto; border-radius: var(--radius-card); border: 1px solid var(--color-border-default); }
.duitnow-qr figcaption { margin-top: var(--space-2); font-size: var(--font-size-small); }

/* ================= Marketplace v2 (header, home, categories, footer) ================= */
.btn-dark { background: #1d2522; color: #fff; border: 1px solid #1d2522; }
.btn-dark:hover { background: #000; color: #fff; }
.icon { flex-shrink: 0; }

.mk-header { background: #fff; border-bottom: 1px solid var(--color-border-default); position: sticky; top: 0; z-index: 50; }
.mk-header-top { max-width: var(--content-max-width); margin: 0 auto; display: flex; align-items: center; gap: var(--space-6); padding: var(--space-3) var(--space-6); }
.mk-spacer { flex: 1; }
.mk-search { flex: 1; display: flex; max-width: 720px; border: 1px solid #c5c6c9; border-radius: 6px; overflow: hidden; }
.mk-search input { flex: 1; min-width: 0; border: 0; padding: 10px 14px; font: inherit; font-size: 0.95rem; }
.mk-search input:focus { outline: none; }
.mk-search:focus-within { border-color: var(--color-brand-dark); }
.mk-search button { border: 0; background: #1d2522; color: #fff; width: 48px; display: grid; place-items: center; cursor: pointer; }
.mk-account { display: flex; align-items: center; gap: var(--space-6); white-space: nowrap; }
.mk-account a:not(.btn) { color: #404145; font-weight: var(--font-weight-semibold); text-decoration: none; font-size: 0.95rem; }
.mk-account a:not(.btn):hover { color: var(--color-accent-orange-end); }
.mk-cats { border-top: 1px solid var(--color-border-default); position: relative; }
.mk-cats > ul { max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--space-6); display: flex; gap: var(--space-6); list-style: none; overflow-x: auto; scrollbar-width: none; }
.mk-cat-link { display: block; padding: 10px 0; color: #62646a; text-decoration: none; font-size: 0.95rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.mk-cat:hover .mk-cat-link, .mk-cat:focus-within .mk-cat-link { color: var(--color-text-heading); border-bottom-color: var(--color-accent-orange-end); }
.mk-mega { display: none; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; width: min(1180px, 96vw); background: #fff; border: 1px solid var(--color-border-default); border-radius: 0 0 10px 10px; box-shadow: 0 12px 32px rgba(14, 46, 43, 0.12); z-index: 60; }
.mk-cat:hover .mk-mega, .mk-cat:focus-within .mk-mega { display: block; }
.mk-mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6) var(--space-8); padding: var(--space-6) var(--space-8); }
.mk-mega h3 { font-size: 0.95rem; margin: 0 0 var(--space-2); color: var(--color-text-heading); }
.mk-mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mk-mega a { color: #62646a; text-decoration: none; font-size: 0.92rem; }
.mk-mega a:hover { color: var(--color-text-heading); text-decoration: underline; }
.mk-mega-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-8); background: #f0faf5; border-top: 1px solid var(--color-border-default); border-radius: 0 0 10px 10px; font-size: 0.9rem; }

.mk-home { background: #fff; }
.mk-hero { background: radial-gradient(1200px 500px at 80% 10%, #1f4d45 0%, transparent 60%), linear-gradient(135deg, #0a1f1c 0%, #0e2e2b 55%, #3a1f12 100%); color: #fff; padding: 96px var(--space-6) 64px; }
.mk-hero-inner { max-width: var(--content-max-width); margin: 0 auto; }
.mk-hero h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 var(--space-8); color: #fff; }
.mk-hero-search { display: flex; max-width: 760px; background: #fff; border-radius: 10px; padding: 6px; }
.mk-hero-search input { flex: 1; min-width: 0; border: 0; padding: 12px 16px; font: inherit; font-size: 1.05rem; border-radius: 8px; }
.mk-hero-search input:focus { outline: none; }
.mk-hero-search button { border: 0; border-radius: 8px; width: 52px; background: #1d2522; color: #fff; display: grid; place-items: center; cursor: pointer; }
.mk-hero-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.mk-hero-chips a { color: #fff; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 8px; padding: 8px 16px; font-weight: var(--font-weight-semibold); text-decoration: none; font-size: 0.95rem; }
.mk-hero-chips a:hover { background: rgba(255, 255, 255, 0.12); }
.mk-hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: 72px; color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; }
.mk-hero-trust strong { color: rgba(255, 255, 255, 0.92); font-size: 1rem; letter-spacing: 0.02em; }
.mk-hero-escrow { display: inline-flex; align-items: center; gap: 6px; color: #9be3c3; }

.mk-section { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-12) var(--space-6) 0; }
.mk-section > h2, .mk-section .section-head h2, .mk-ways > h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 500; color: #222325; margin: 0 0 var(--space-6); letter-spacing: -0.01em; }
.mk-cat-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); }
.mk-cat-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); min-height: 118px; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); color: #222325; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.mk-cat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.mk-cat-card strong { font-size: 0.95rem; }
.mk-cat-card span { font-size: 0.8rem; color: var(--color-text-muted); }

.mk-pop-row { list-style: none; margin: 0; padding: 0 0 var(--space-2); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; }
.mk-pop-row li { scroll-snap-align: start; }
.mk-pop-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); background: #003912; color: #fff; border-radius: 16px; padding: var(--space-4) var(--space-2) var(--space-2); height: 270px; text-decoration: none; }
.mk-pop-card strong { padding: 0 var(--space-3); font-size: 1.15rem; line-height: 1.25; }
.mk-pop-art { display: grid; place-items: center; flex: 1; max-height: 170px; border-radius: 12px; transition: transform 0.2s; }
.mk-pop-card:hover .mk-pop-art { transform: scale(1.03); }
.pop-code { background: #DCF3EA; color: #0E2E2B; } .pop-palette { background: #FBE3D3; color: #7A2E12; }
.pop-search { background: #E3F0E6; color: #1F4D2E; } .pop-video { background: #E9E2F7; color: #3A2A5C; }
.pop-megaphone { background: #FCE4EC; color: #7A1F3D; } .pop-music { background: #F3EFD2; color: #4F4614; }
.pop-chart { background: #DDEBF5; color: #123A4F; } .pop-pen { background: #F5E6D6; color: #4A2E14; }

.mk-pro { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); background: #e8f8f1; border-radius: 16px; padding: var(--space-12); align-items: center; }
.mk-pro-brand { font-weight: var(--font-weight-black); font-size: 1.4rem; color: #0E2E2B; margin: 0; }
.mk-pro-brand strong { color: var(--color-accent-orange-end); font-weight: 600; }
.mk-pro h2 { font-size: clamp(1.8rem, 3.5vw, 2.7rem); font-weight: 500; line-height: 1.15; margin: var(--space-4) 0 var(--space-6); color: #222325; }
.mk-pro h2 em { font-family: Georgia, serif; color: #1dbf73; }
.mk-pro-grid { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.mk-pro-grid .icon { color: #0E5C3E; }
.mk-pro-grid h3 { margin: var(--space-2) 0 var(--space-1); font-size: 1.05rem; color: #222325; }
.mk-pro-grid p { margin: 0; font-size: 0.92rem; color: #62646a; }
.mk-pro-art { position: relative; min-height: 300px; border-radius: 16px; background: linear-gradient(160deg, #1d5a48, #0e2e2b); padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; }
.mk-pro-panel { background: #fff; border-radius: 12px; padding: var(--space-6); display: grid; gap: var(--space-3); }
.mk-bar { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--color-accent-orange-start), var(--color-accent-orange-end)); }
.mk-bar.w86 { width: 86%; } .mk-bar.w64 { width: 64%; } .mk-bar.w92 { width: 92%; } .mk-bar.w48 { width: 48%; }
.mk-pro-chip { position: absolute; top: -16px; right: 16px; background: #fff; border-radius: 999px; padding: 8px 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); font-size: 0.85rem; display: flex; align-items: center; gap: 8px; }
.mk-ring { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #1dbf73; border-right-color: #d6f0e3; }
.mk-pro-amount { margin-top: var(--space-4); align-self: flex-start; background: #fff; border-radius: 10px; padding: 8px 14px; font-weight: 700; color: #0E2E2B; }

.mk-happen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-8); }
.mk-happen .icon { color: #404145; }
.mk-happen p { color: #62646a; margin: var(--space-3) 0 0; font-size: 1rem; }
.mk-center { text-align: center; margin-top: var(--space-8); }

.mk-guides { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.mk-guides a { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.mk-guides strong { font-size: 1.1rem; color: #222325; margin-top: var(--space-2); }
.mk-guides span { color: #62646a; font-size: 0.92rem; }
.mk-guide-art { display: grid !important; place-items: center; height: 200px; border-radius: 10px; }
.mk-guide-art.g1 { background: linear-gradient(135deg, #f3d9c4, #e9812f); color: #fff !important; }
.mk-guide-art.g2 { background: linear-gradient(135deg, #c9f0dd, #1dbf73); color: #fff !important; }
.mk-guide-art.g3 { background: linear-gradient(135deg, #d9e3f7, #2d4c8f); color: #fff !important; }
.mk-guides a:hover strong { text-decoration: underline; }

.mk-banner { background: linear-gradient(120deg, #4a1726, #6b1f33); color: #fff; border-radius: 12px; padding: var(--space-12) var(--space-6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.mk-banner h2 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 500; color: #fff; }
.mk-banner em { font-family: Georgia, serif; color: #ff7640; }

.mk-ways { background: #fafafa; margin-top: var(--space-12); padding: var(--space-8) var(--space-6); border-top: 1px solid var(--color-border-default); }
.mk-ways > h2 { max-width: var(--content-max-width); margin: 0 auto var(--space-4); font-size: 1.1rem !important; font-weight: 700 !important; }
.mk-ways ul { list-style: none; padding: 0; margin: 0 auto; max-width: var(--content-max-width); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.mk-ways li { background: #fff; border: 1px solid var(--color-border-default); border-radius: 8px; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.mk-ways h3 { margin: 0; font-size: 1rem; }
.mk-ways p { margin: 0 0 var(--space-2); color: #62646a; font-size: 0.88rem; flex: 1; }

.mk-footer { background: #fff; border-top: 1px solid var(--color-border-default); padding: var(--space-12) var(--space-6) var(--space-6); }
.mk-footer-cols { max-width: var(--content-max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-8); }
.mk-footer h2 { font-size: 1rem; margin: 0 0 var(--space-4); color: #222325; }
.mk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.mk-footer a { color: #62646a; text-decoration: none; font-size: 0.92rem; }
.mk-footer a:hover { text-decoration: underline; color: #222325; }
.mk-footer-bottom { max-width: var(--content-max-width); margin: var(--space-8) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--color-border-default); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.mk-footer-brand { display: flex; align-items: center; gap: var(--space-4); color: #74767e; font-size: 0.9rem; }
.mk-pay-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pay-chip { border: 1px solid var(--color-border-default); border-radius: 6px; padding: 3px 10px; font-size: 0.8rem; font-weight: 600; color: #404145; }
.mk-currency { color: #74767e; font-size: 0.85rem; margin-left: var(--space-3); }

.mk-cat-banner { max-width: calc(var(--content-max-width) - 2 * var(--space-6)); margin: var(--space-8) auto 0; border-radius: 10px; color: #fff; padding: var(--space-12) var(--space-8); display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); }
.mk-cat-banner h1 { margin: 0 0 var(--space-2); font-size: clamp(1.8rem, 4vw, 2.6rem); color: #fff; }
.mk-cat-banner p { margin: 0 0 var(--space-6); font-size: 1.15rem; color: rgba(255, 255, 255, 0.9); }
.mk-cat-banner-art { opacity: 0.35; }
.tone-design-branding { background: #5B2333; color: #fff; } .tone-web-app-development { background: #0E3B4A; color: #fff; }
.tone-marketing-growth { background: #1F4D2E; color: #fff; } .tone-video-animation { background: #3A2A5C; color: #fff; }
.tone-data-analytics { background: #123A4F; color: #fff; } .tone-writing-translation { background: #4A2E14; color: #fff; }
.tone-audio-voice { background: #2F1F4A; color: #fff; } .tone-business-admin { background: #24323A; color: #fff; }
.mk-chip-row { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); }
.mk-chip-row a { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 14px 18px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); color: #222325; text-decoration: none; font-weight: 600; background: #fff; }
.mk-chip-row a:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); }
.mk-explore { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-8); }
.mk-explore-art { display: grid; place-items: center; height: 150px; border-radius: 10px; margin-bottom: var(--space-4); opacity: 0.92; }
.mk-explore-col h3 { margin: 0 0 var(--space-3); font-size: 1.15rem; color: #222325; }
.mk-explore-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.mk-explore-col a { color: #62646a; text-decoration: none; font-size: 1rem; }
.mk-explore-col a:hover { color: #222325; text-decoration: underline; }

@media (max-width: 900px) {
  .mk-pro { grid-template-columns: 1fr; padding: var(--space-8) var(--space-6); }
  .mk-pro-grid { grid-template-columns: 1fr; }
  .mk-hide-sm { display: none; }
  .mk-header-top { gap: var(--space-3); padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
  .mk-search { order: 3; flex-basis: 100%; max-width: none; }
  .mk-mega { display: none !important; }
  .mk-hero { padding: 56px var(--space-4) 40px; }
  .mk-hero-trust { margin-top: 40px; gap: var(--space-3); }
  .mk-cat-banner { margin: var(--space-4); padding: var(--space-8) var(--space-6); }
  .mk-cat-banner-art { display: none; }
}

/* hearts, header icons, account menu */
.service-card { position: relative; }
.heart-btn { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.92); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); z-index: 2; }
.heart-btn path { fill: rgba(0, 0, 0, 0.25); stroke: #fff; stroke-width: 1.6; transition: fill 0.15s; }
.heart-btn:hover path { fill: rgba(0, 0, 0, 0.45); }
.heart-btn[aria-pressed="true"] path { fill: #e8485f; stroke: #e8485f; }
.heart-btn.heart-inline { position: static; border: 1px solid var(--color-border-default); box-shadow: none; }
.heart-btn.heart-inline path { fill: none; stroke: #74767e; }
.heart-btn.heart-inline[aria-pressed="true"] path { fill: #e8485f; stroke: #e8485f; }
.mk-icon-link { color: #62646a !important; display: grid; place-items: center; }
.mk-icon-link:hover { color: var(--color-text-heading) !important; }
.mk-user { position: relative; }
.mk-user summary { list-style: none; cursor: pointer; }
.mk-user summary::-webkit-details-marker { display: none; }
.mk-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--color-brand-dark); color: #fff; display: grid; place-items: center; }
.mk-user-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 250px; background: #fff; border: 1px solid var(--color-border-default); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); padding: var(--space-2) 0; z-index: 70; display: flex; flex-direction: column; }
.mk-user-menu a, .mk-user-menu button { padding: 9px 18px; color: #404145 !important; text-decoration: none; font-size: 0.95rem; font-weight: 500 !important; background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.mk-user-menu a:hover, .mk-user-menu button:hover { background: #f5f5f5; }
.mk-user-menu hr { border: 0; border-top: 1px solid var(--color-border-default); margin: 6px 0; }

/* gig page: package tabs + compare */
.pkg-box { position: sticky; top: 130px; align-self: start; background: #fff; border: 1px solid var(--color-border-default); border-radius: 10px; overflow: hidden; }
.pkg-radio { position: absolute; opacity: 0; pointer-events: none; }
.pkg-tabs { display: flex; border-bottom: 1px solid var(--color-border-default); }
.pkg-tab { flex: 1; text-align: center; padding: 14px 8px; font-weight: 700; color: #74767e; cursor: pointer; border-bottom: 3px solid transparent; }
.pkg-panel { display: none; padding: var(--space-6); border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.pkg-radio-0:checked ~ .pkg-panel-0, .pkg-radio-1:checked ~ .pkg-panel-1, .pkg-radio-2:checked ~ .pkg-panel-2 { display: flex; flex-direction: column; gap: var(--space-3); }
.pkg-radio-0:checked ~ .pkg-tabs .pkg-tab:nth-child(1), .pkg-radio-1:checked ~ .pkg-tabs .pkg-tab:nth-child(2), .pkg-radio-2:checked ~ .pkg-tabs .pkg-tab:nth-child(3) { color: var(--color-text-heading); border-bottom-color: var(--color-brand-dark); background: #fafafa; }
.pkg-radio:focus-visible ~ .pkg-tabs { outline: 2px solid var(--color-brand-dark); outline-offset: -2px; }
.pkg-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.pkg-head .package-price { margin: 0; font-size: 1.5rem; }
.pkg-panel .action-form, .pkg-panel .action-form button, .pkg-panel > .btn { width: 100%; }
.pkg-compare-link { text-align: center; font-size: 0.9rem; color: #62646a; }
.pkg-escrow { margin: 0; padding: var(--space-3) var(--space-6); background: #f0faf5; font-size: 0.85rem; color: #1F4D2E; border-top: 1px solid var(--color-border-default); }
.pkg-compare { margin-top: var(--space-8); padding: var(--space-6); }
.pkg-compare th strong { display: block; }
.pkg-cmp-price { display: block; font-size: 1.2rem; font-weight: 800; color: var(--color-text-heading); }
.mk-sell-hero { background: linear-gradient(120deg, #0e2e2b 0%, #1d5a48 60%, #e9812f 140%); }
.mk-sell-lead { font-size: 1.2rem; color: rgba(255, 255, 255, 0.85); max-width: 560px; margin: 0 0 var(--space-6); }
.mk-sell-stats { list-style: none; padding: var(--space-6); margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-6); background: #f5f5f5; border-radius: 12px; text-align: center; }
.mk-sell-stats strong { display: block; font-size: 2rem; color: #222325; }
.mk-sell-stats span { color: #62646a; }
.mk-happen h3 { margin: var(--space-3) 0 0; font-size: 1.05rem; color: #222325; }

/* sub-service page */
.mk-sub-head h1 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: var(--space-3) 0 var(--space-2); color: #222325; }
.mk-crumbs { display: flex; align-items: center; gap: var(--space-2); font-size: 0.9rem; color: #62646a; }
.mk-crumbs a { color: #222325; text-decoration: none; display: inline-flex; }
.mk-sub-desc { color: #62646a; margin: 0 0 var(--space-6); }
.mk-sub-desc a { color: #222325; font-weight: 600; margin-left: var(--space-3); }
.mk-chip-row-sm a { padding: 8px 16px; box-shadow: none; border: 1px solid var(--color-border-default); border-radius: 999px; font-weight: 500; }
.mk-results { padding-top: var(--space-4); }
.mk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-border-default); }
.mk-filter { position: relative; }
.mk-filter summary { list-style: none; cursor: pointer; border: 1px solid #c5c6c9; border-radius: 8px; padding: 9px 16px; font-weight: 600; color: #222325; background: #fff; }
.mk-filter summary::-webkit-details-marker { display: none; }
.mk-filter[open] summary { border-color: #222325; }
.mk-filter-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 260px; background: #fff; border: 1px solid var(--color-border-default); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); padding: var(--space-4); display: grid; gap: var(--space-3); }
.mk-filter-pop input:not([type=radio]) { border: 1px solid #c5c6c9; border-radius: 6px; padding: 8px 10px; font: inherit; }
.mk-radio { display: flex; align-items: center; gap: var(--space-2); }
.mk-sort { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); color: #62646a; }
.mk-sort select { border: 0; font: inherit; font-weight: 700; color: #222325; background: transparent; }
.mk-active { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.mk-empty { text-align: center; padding: var(--space-12) var(--space-6); border: 1px dashed var(--color-border-default); border-radius: 12px; }
.mk-empty h2 { margin: 0 0 var(--space-2); }
.mk-empty .home-cta-actions { justify-content: center; display: flex; gap: var(--space-3); margin-top: var(--space-4); }

/* gig page extras */
.gig-rating { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #222325; margin: -8px 0 4px; }
.stars { color: #222325; letter-spacing: 1px; }
.seller-card-head { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.seller-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); border: 1px solid var(--color-border-default); border-radius: 8px; padding: var(--space-4); margin: 0 0 var(--space-4); }
.seller-facts dt { color: #74767e; font-size: 0.85rem; }
.seller-facts dd { margin: 2px 0 0; font-weight: 700; color: #404145; }
.review-summary { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.review-avg strong { font-size: 1.4rem; }
.review-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 420px; }
.review-bars li { display: grid; grid-template-columns: 60px 1fr 40px; align-items: center; gap: var(--space-3); font-size: 0.9rem; }
.review-bars progress { width: 100%; height: 8px; accent-color: #222325; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.review-list li { border-top: 1px solid var(--color-border-default); padding-top: var(--space-4); }
.review-list p { margin: 0 0 var(--space-2); }
.review-reply { background: #f5f5f5; border-radius: 8px; padding: var(--space-3); font-size: 0.92rem; }
.gig-more { margin-top: var(--space-12); }
.gig-more h2 { font-size: 1.5rem; font-weight: 600; color: #222325; }