:root {
      --green:     #1a5c3a;
      --green-mid: #217a4e;
      --green-lt:  #e8f5ee;
      --accent:    #f0a500;
      --pro-gold:  #f59e0b;
      --text:      #1a1a1a;
      --muted:     #6b7280;
      --border:    #e5e7eb;
      --white:     #ffffff;
      --bg:        #f9fafb;
      --radius:    10px;
      --shadow:    0 2px 16px rgba(0,0,0,0.08);
      --danger:    #dc2626;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { overflow-x: hidden; }
    body {
      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text); background: var(--bg); line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button, a, input, select, textarea, label { touch-action: manipulation; }

    /* ── Nav ── */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: var(--white); border-bottom: 1px solid var(--border);
      padding: 0 1.25rem;
    }
    .nav-inner {
      max-width: 1000px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      height: 64px;
    }
    .logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
    .logo-img { height: clamp(34px, 4vw, 44px); width: auto; object-fit: contain; display: block; flex-shrink: 0; }
    .logo-text { display: inline-flex; align-items: baseline; letter-spacing: -0.4px; line-height: 1; }
    .logo-tradie { font-size: clamp(1.15rem, 2.8vw, 1.35rem); font-weight: 800; color: var(--green); }
    .logo-sync   { font-size: clamp(1.15rem, 2.8vw, 1.35rem); font-weight: 900; color: var(--accent); }
    .icon-svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
    .quality-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #d1d5db; margin-right: 2px; vertical-align: 1px; }
    .quality-dot.filled { background: var(--green-mid); }
    .nav-right { display: flex; align-items: center; gap: 1rem; }
    .credit-badge {
      background: var(--green-lt); color: var(--green);
      border: 1px solid #a7d8bc; border-radius: 20px;
      padding: 0.3rem 0.85rem; font-size: 0.875rem; font-weight: 700;
    }
    .credit-badge.zero-credits {
      background: #fee2e2; color: var(--danger);
      border-color: #fca5a5;
    }
    .pro-badge {
      background: var(--pro-gold); color: #1a1a1a;
      border-radius: 20px; padding: 0.3rem 0.85rem;
      font-size: 0.8rem; font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.04em;
    }
    .pro-badge a { color: inherit; }
    .btn-logout {
      background: none; border: 1px solid var(--border);
      color: var(--muted); font-size: 0.8rem; padding: 0.35rem 0.75rem;
      border-radius: 6px; cursor: pointer;
    }
    .btn-logout:hover { border-color: var(--danger); color: var(--danger); }

    /* ── Auth screen ── */
    .auth-wrap {
      min-height: calc(100vh - 60px);
      display: flex; align-items: center; justify-content: center;
      padding: 2rem 1rem;
    }
    .auth-card {
      background: var(--white); border-radius: 16px;
      box-shadow: var(--shadow); padding: 2.5rem 2rem;
      width: 100%; max-width: 400px;
    }
    .auth-card h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.25rem; }
    .auth-card p.sub { color: var(--muted); font-size: 0.875rem; margin-bottom: 1.75rem; }

    /* ── Forms ── */
    .form-row { margin-bottom: 1rem; }
    .form-row label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.35rem; }
    .form-row input {
      width: 100%; padding: 0.65rem 0.9rem;
      border: 1px solid var(--border); border-radius: 8px;
      font-size: 1rem; font-family: inherit;
    }
    .form-row input:focus { outline: none; border-color: var(--green); }
    .form-row select {
      width: 100%; padding: 0.65rem 0.9rem;
      border: 1px solid var(--border); border-radius: 8px;
      font-size: 1rem; font-family: inherit; background: var(--white);
    }
    .form-row select:focus { outline: none; border-color: var(--green); }

    /* ── Trade checkbox grid ── */
    .trade-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 0.4rem;
      max-height: 280px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.6rem;
      background: var(--white);
    }
    .trade-grid label {
      display: flex; align-items: center; gap: 0.4rem;
      font-size: 0.85rem; font-weight: 400;
      padding: 0.45rem 0.5rem; border-radius: 6px;
      cursor: pointer; user-select: none;
      transition: background 0.15s; min-height: 38px;
    }
    .trade-grid label:hover { background: var(--green-lt); }
    .trade-grid input[type="checkbox"] {
      width: 18px; height: 18px; flex-shrink: 0;
      accent-color: var(--green);
    }
    .trade-grid .trade-section {
      grid-column: 1 / -1;
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
      color: var(--muted); letter-spacing: 0.04em;
      padding: 0.4rem 0.2rem 0.1rem; border-top: 1px solid var(--border);
      margin-top: 0.2rem;
    }
    .trade-grid .trade-section:first-child { border-top: none; margin-top: 0; }

    .pw-wrap { position: relative; }
    .pw-wrap input { padding-right: 2.75rem; }
    .pw-toggle {
      position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer; padding: 0; color: var(--muted);
      display: flex; align-items: center;
    }
    .pw-toggle:hover { color: var(--green); }
    .btn-primary {
      width: 100%; background: var(--accent); color: #1a1a1a;
      font-weight: 700; font-size: 1rem; padding: 0.8rem;
      border: none; border-radius: var(--radius); cursor: pointer;
    }
    .btn-primary:hover { background: #e09800; }
    .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
    .btn-secondary {
      background: none; border: none; color: var(--muted);
      font-size: 0.85rem; cursor: pointer; margin-top: 0.75rem; text-decoration: underline;
    }
    .error-msg {
      background: #fee2e2; color: var(--danger);
      border-radius: 7px; padding: 0.65rem 0.9rem;
      font-size: 0.875rem; margin-bottom: 1rem; display: none;
    }
    .dev-box {
      background: #fffbeb; border: 1px solid #fcd34d; border-radius: 7px;
      padding: 0.65rem 0.9rem; font-size: 0.8rem; color: #92400e;
      margin-top: 0.75rem; display: none;
    }

    /* ── Info / sent message ── */
    .info-msg {
      background: #eff6ff; color: #1d4ed8; border-radius: 7px;
      padding: 0.65rem 0.9rem; font-size: 0.8rem; margin-top: 0.75rem;
    }

    /* ── Dashboard ── */
    .dashboard { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1.25rem; }
    .dash-greeting { font-size: 1.25rem; font-weight: 800; margin-bottom: 1.25rem; }

    /* ── Tabs ── */
    .tabs-wrap {
      position: relative;
    }
    .tabs-wrap::after {
      content: ''; position: absolute; right: 0; top: 0; bottom: 0;
      width: 32px; pointer-events: none;
      background: linear-gradient(to right, transparent, var(--bg));
      opacity: 0; transition: opacity .2s;
    }
    .tabs-wrap.can-scroll::after { opacity: 1; }
    .tabs {
      display: flex; gap: 0; border-bottom: 2px solid var(--border);
      margin-bottom: 1.5rem; overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
      background: none; border: none; padding: 0.75rem 1.25rem;
      font-size: 0.9rem; font-weight: 600; color: var(--muted);
      cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
      margin-bottom: -2px;
    }
    .tab-btn.active { color: var(--green); border-bottom-color: var(--green); }

    /* ── Cards ── */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1rem;
    }
    .card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.25rem;
      box-shadow: var(--shadow);
    }
    .card-header {
      display: flex; justify-content: space-between; align-items: flex-start;
      margin-bottom: 0.6rem;
    }
    .card-trade {
      display: inline-block; background: var(--green-lt); color: var(--green);
      font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.6rem;
      border-radius: 4px; text-transform: uppercase;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.35; }
    }
    .urgency-badge {
      font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem;
      border-radius: 4px; display: inline-flex; align-items: center; gap: 0.3rem;
    }
    .urgency-emergency {
      background: #fee2e2; color: var(--danger); font-weight: 700;
      border: 1px solid #fca5a5;
    }
    .urgency-emergency::before {
      content: ''; display: inline-block; width: 6px; height: 6px;
      border-radius: 50%; background: var(--danger);
      animation: pulse-dot 1.4s ease-in-out infinite;
    }
    .urgency-asap      { background: #fff3cd; color: #92400e; border: 1px solid #fcd34d; }
    .urgency-within_days { background: #e0f2fe; color: #0369a1; }
    .urgency-flexible  { background: var(--bg); color: var(--muted); }
    .card h3 { font-size: 0.975rem; font-weight: 700; margin-bottom: 0.25rem; }
    .card-meta { font-size: 0.825rem; color: var(--muted); margin-bottom: 0.75rem; }
    .card-desc {
      font-size: 0.875rem; color: var(--text); margin-bottom: 0.25rem;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
      overflow: hidden; cursor: pointer;
    }
    .card-desc.expanded {
      display: block; -webkit-line-clamp: unset; overflow: visible;
    }
    .card-desc-toggle {
      font-size: 0.8rem; color: var(--green); cursor: pointer;
      background: none; border: none; padding: 0; margin-bottom: 0.75rem;
      display: none;
    }
    .card-desc-toggle.visible { display: inline; }
    .card { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
    .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-1px); }
    .card.has-photo { border-left: 3px solid var(--green-mid); }
    .job-quality { font-size: 0.8rem; margin-bottom: 0.5rem; letter-spacing: 1px; position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
    .quality-info-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 0.78rem; padding: 0; line-height: 1; flex-shrink: 0; }
    .quality-info-btn:hover { color: var(--green); }
    .quality-tip-box {
      display: none; position: absolute; left: 0; bottom: calc(100% + 6px);
      background: #1a1a1a; color: #fff; font-size: 0.78rem; font-weight: 400;
      padding: 0.5rem 0.75rem; border-radius: 8px; line-height: 1.45;
      z-index: 20; width: 230px; white-space: normal; letter-spacing: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
    .quality-tip-box::after {
      content: ''; position: absolute; top: 100%; left: 12px;
      border: 5px solid transparent; border-top-color: #1a1a1a;
    }
    .quality-tip-box.open { display: block; }
    .photo-badge {
      font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.45rem;
      border-radius: 5px; background: #fef3c7; color: #92400e;
      border: 1px solid #fcd34d; cursor: default; white-space: nowrap;
    }
    .slots-badge {
      font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem;
      border-radius: 4px; background: #e0f2fe; color: #0369a1;
    }
    .slots-badge.urgent { background: #fee2e2; color: var(--danger); }

    /* ── Job detail modal ── */
    .job-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.5);
      z-index: 1000; display: flex; align-items: center; justify-content: center;
      padding: 1rem;
      opacity: 0; pointer-events: none; transition: opacity 0.2s;
    }
    .job-modal-overlay.open { opacity: 1; pointer-events: auto; }
    .job-modal {
      background: var(--white); border-radius: 14px;
      width: 100%; max-width: 560px;
      max-height: 88vh; overflow-y: auto;
      padding: 1.5rem 1.5rem 2rem;
      transform: scale(0.95) translateY(-8px);
      transition: transform 0.2s cubic-bezier(.32,.72,0,1), opacity 0.2s;
      opacity: 0;
    }
    .job-modal-overlay.open .job-modal { transform: scale(1) translateY(0); opacity: 1; }
    .modal-top-row {
      display: flex; justify-content: space-between; align-items: flex-start;
      margin-bottom: 0.75rem; gap: 0.5rem;
    }
    .modal-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; }
    .modal-close {
      background: var(--bg); border: none; border-radius: 50%;
      width: 2.5rem; height: 2.5rem; font-size: 1.2rem; cursor: pointer;
      color: var(--muted); flex-shrink: 0; display: flex;
      align-items: center; justify-content: center;
    }
    .modal-close:hover { background: var(--border); }
    .modal-section { margin-bottom: 1rem; }
    .modal-label {
      font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
      color: var(--muted); letter-spacing: 0.05em; margin-bottom: 0.25rem;
    }
    .modal-location { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.2rem; }
    .modal-meta { font-size: 0.825rem; color: var(--muted); margin-bottom: 1rem; }
    .contact-row {
      background: var(--green-lt); border-radius: 7px;
      padding: 0.6rem 0.8rem; font-size: 0.85rem;
      margin-bottom: 0.75rem;
    }
    .contact-row strong { display: block; font-size: 0.875rem; }
    .contact-row a { color: var(--green); font-weight: 700; }
    .btn-unlock {
      width: 100%; background: var(--accent); color: #1a1a1a;
      font-weight: 700; font-size: 0.9rem; padding: 0.75rem;
      border: none; border-radius: 8px; cursor: pointer; min-height: 44px;
    }
    .btn-unlock:hover { filter: brightness(1.06); }
    .btn-unlock:disabled { opacity: 0.55; cursor: not-allowed; }
    .btn-limit-reached {
      width: 100%; background: #f0f0f0; color: #888;
      font-weight: 600; font-size: 0.85rem; padding: 0.65rem;
      border: 1px solid #ddd; border-radius: 8px; cursor: default;
    }
    .contacting-as {
      font-size: 0.78rem; color: var(--muted); margin-bottom: 0.35rem;
      padding: 0.3rem 0.5rem; background: var(--card-bg);
      border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0;
    }
    .btn-unlocked {
      width: 100%; background: var(--green-lt); color: var(--green);
      font-weight: 700; font-size: 0.85rem; padding: 0.6rem;
      border: 1px solid #a7d8bc; border-radius: 8px; cursor: default;
    }
    .btn-undo-unlock {
      width: 100%; margin-top: 0.4rem;
      background: none; border: 1px solid var(--border); color: var(--muted);
      font-size: 0.78rem; font-weight: 600; padding: 0.4rem;
      border-radius: 6px; cursor: pointer; font-family: inherit;
      transition: border-color .15s, color .15s;
    }
    .btn-undo-unlock:hover { border-color: #e55; color: #c00; }
    .job-vision-summary {
      background: var(--green-soft); border: 1px solid rgba(26,92,58,0.2);
      border-radius: 8px; padding: 0.6rem 0.75rem;
      font-size: 0.81rem; color: var(--text-2); margin-bottom: 0.6rem;
      line-height: 1.45;
    }
    .vision-header {
      display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.35rem; flex-wrap: wrap;
    }
    .vision-icon { font-size: 0.9rem; }
    .vision-label { font-size: 0.72rem; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.3px; }
    .vision-text { font-size: 0.82rem; color: var(--text); line-height: 1.5; }
    .va-trade-tag {
      font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem;
      border-radius: 4px; background: var(--green); color: #fff;
    }
    .va-cond-tag {
      font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.45rem;
      border-radius: 4px; background: #e0f2fe; color: #0369a1;
    }
    .va-cond-tag.poor, .va-cond-tag.damaged { background: #fee2e2; color: var(--danger); }
    .empty-state {
      text-align: center; padding: 3rem 1rem; color: var(--muted);
    }
    .empty-state .icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
    .empty-state p { font-size: 0.9rem; }

    /* ── Credits / Buy ── */
    .credits-hero {
      background: linear-gradient(135deg, var(--green) 0%, #0f3d26 100%);
      color: #fff; border-radius: 14px; padding: 1.75rem;
      margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1.5rem;
      flex-wrap: wrap;
    }
    .credits-hero .big-num {
      font-size: 3rem; font-weight: 800; line-height: 1;
    }
    .credits-hero .label { opacity: 0.85; font-size: 0.9rem; }
    .packs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1rem;
    }
    .pack-card {
      background: var(--white); border: 2px solid var(--border);
      border-radius: var(--radius); padding: 1.5rem;
      text-align: center; cursor: pointer;
      transition: border-color .15s, box-shadow .15s;
    }
    .pack-card:hover { border-color: var(--green); box-shadow: var(--shadow); }
    .pack-card.popular { border-color: var(--accent); }
    .pack-badge {
      display: inline-block; background: var(--accent); color: #1a1a1a;
      font-size: 0.7rem; font-weight: 800; padding: 0.15rem 0.5rem;
      border-radius: 4px; margin-bottom: 0.5rem; text-transform: uppercase;
    }
    .pack-credits { font-size: 2rem; font-weight: 800; color: var(--green); }
    .pack-unit { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.5rem; }
    .pack-price { font-size: 1.4rem; font-weight: 800; margin-bottom: 1rem; }
    .pack-cpm { font-size: 0.75rem; color: var(--muted); margin-bottom: 1rem; }
    .btn-buy {
      width: 100%; background: var(--accent); color: #1a1a1a;
      font-weight: 700; font-size: 0.9rem; padding: 0.7rem;
      border: none; border-radius: 8px; cursor: pointer;
    }
    .btn-buy:hover { background: #e09800; }
    .stripe-note {
      text-align: center; color: var(--muted); font-size: 0.8rem; margin-top: 1rem;
    }

    /* ── Job photo preview ── */
    .job-photo {
      width: 100%; max-height: 180px; object-fit: cover;
      border-radius: 7px; margin-bottom: 0.75rem; display: block;
    }
    .job-photo-blur-wrap {
      position: relative; width: 100%; height: 120px;
      border-radius: 7px; overflow: hidden; margin-bottom: 0.75rem;
      background: #d1d5db;
    }
    .job-photo-blur-bg {
      width: 100%; height: 100%; background: linear-gradient(135deg, #c4c4c4 0%, #9ca3af 100%);
      filter: blur(6px); transform: scale(1.1);
    }
    .job-photo-blur-overlay {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      background: rgba(0,0,0,0.3);
      color: #fff; font-size: 0.8rem; text-align: center; padding: 0.5rem;
    }
    .job-photo-blur-overlay .lock-icon { font-size: 2rem; margin-bottom: 0.4rem; line-height: 1; }
    .job-photo-blur-overlay a {
      color: var(--pro-gold); font-weight: 700; text-decoration: underline;
    }

    /* ── Multi-photo gallery ── */
    .job-photo-gallery {
      display: grid; gap: 4px; margin-bottom: 0.75rem;
      border-radius: 7px; overflow: hidden;
    }
    .job-photo-gallery.count-1 { grid-template-columns: 1fr; }
    .job-photo-gallery.count-2 { grid-template-columns: 1fr 1fr; }
    .job-photo-gallery.count-3 { grid-template-columns: 1fr 1fr 1fr; }
    .job-photo-gallery img {
      width: 100%; height: 150px; object-fit: cover; display: block;
      cursor: zoom-in; transition: opacity .15s;
    }
    .job-photo-gallery.count-1 img { height: 180px; }
    .job-photo-gallery img:hover  { opacity: 0.92; }
    /* Lightbox */
    .photo-lightbox {
      display: none; position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.92); align-items: center; justify-content: center;
    }
    .photo-lightbox.open { display: flex; }
    .photo-lightbox img  { max-width: 92vw; max-height: 88vh; border-radius: 8px; }
    .photo-lightbox-close {
      position: absolute; top: 1rem; right: 1.25rem;
      color: #fff; font-size: 2rem; cursor: pointer; line-height: 1;
      background: none; border: none;
    }
    .photo-lightbox-prev, .photo-lightbox-next {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,0.15); color: #fff; border: none;
      font-size: 1.5rem; padding: 0.5rem 0.75rem; cursor: pointer;
      border-radius: 6px;
    }
    .photo-lightbox-prev { left: 0.75rem; }
    .photo-lightbox-next { right: 0.75rem; }

    /* ── Pro upsell banner on dashboard ── */
    .pro-upsell {
      background: linear-gradient(135deg, #0f3d26 0%, var(--green) 100%);
      color: #fff; border-radius: 14px; padding: 1.25rem 1.5rem;
      margin-bottom: 1.5rem;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 1rem;
    }
    .pro-upsell-text { font-size: 0.9rem; opacity: 0.9; }
    .pro-upsell-text strong { font-size: 1rem; display: block; margin-bottom: 0.2rem; }
    .btn-go-pro {
      background: var(--pro-gold); color: #1a1a1a;
      font-weight: 800; font-size: 0.875rem; padding: 0.6rem 1.25rem;
      border: none; border-radius: 8px; cursor: pointer; white-space: nowrap;
      font-family: inherit;
    }
    .btn-go-pro:hover { filter: brightness(1.06); }

    /* ── Subscription tab ── */
    .sub-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 1rem;
    }
    .sub-card-info h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.2rem; }
    .sub-card-info p  { font-size: 0.875rem; color: var(--muted); }
    .btn-manage-sub {
      background: none; border: 2px solid var(--green); color: var(--green);
      font-weight: 700; font-size: 0.875rem; padding: 0.55rem 1.1rem;
      border-radius: 8px; cursor: pointer; font-family: inherit;
    }
    .btn-manage-sub:hover { background: var(--green-lt); }

    /* ── New-job notification banner ── */
    #job-notify-banner {
      position: fixed; top: 62px; left: 50%; transform: translateX(-50%) translateY(-200%);
      z-index: 200; background: var(--green); color: #fff;
      border-radius: 10px; padding: 0.75rem 1.1rem;
      display: flex; align-items: center; gap: 0.75rem;
      box-shadow: 0 4px 20px rgba(0,0,0,0.18);
      font-size: 0.9rem; font-weight: 600;
      transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
      white-space: nowrap; max-width: calc(100vw - 2rem); overflow: hidden;
      pointer-events: none;
    }
    #job-notify-banner.show {
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }
    #job-notify-banner .notify-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #job-notify-banner .notify-btn {
      background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4);
      color: #fff; font-size: 0.8rem; font-weight: 700;
      padding: 0.3rem 0.7rem; border-radius: 6px; cursor: pointer;
      white-space: nowrap; font-family: inherit;
    }
    #job-notify-banner .notify-btn:hover { background: rgba(255,255,255,0.35); }
    #job-notify-banner .notify-close {
      background: none; border: none; color: rgba(255,255,255,0.9);
      font-size: 1.2rem; cursor: pointer;
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; border-radius: 8px; font-family: inherit;
      touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    #job-notify-banner .notify-close:hover,
    #job-notify-banner .notify-close:active { background: rgba(255,255,255,0.2); }

    /* ── New-job card highlight ── */
    .card.card-new {
      border-color: var(--accent);
      animation: card-arrive 0.4s ease-out, card-glow 3s ease-out 0.4s forwards;
    }
    @keyframes card-arrive {
      from { opacity: 0; transform: translateY(-12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes card-glow {
      0%   { box-shadow: 0 0 0 3px rgba(240,165,0,0.5), var(--shadow); border-color: var(--accent); }
      100% { box-shadow: var(--shadow);                                  border-color: var(--border); }
    }

    /* ── SSE connection indicator (tiny dot in nav) ── */
    .live-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #6b7280; display: inline-block;
      transition: background 0.4s;
    }
    .live-dot.connected { background: #22c55e; }

    /* ── Spinner ── */
    .spinner {
      display: inline-block; width: 18px; height: 18px;
      border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
      border-radius: 50%; animation: spin .6s linear infinite;
      vertical-align: middle; margin-right: 6px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Toast ── */
    #toast {
      position: fixed; bottom: 1.5rem; left: 1rem; right: 1rem;
      max-width: 420px; margin: 0 auto;
      background: #1a1a1a; color: #fff; padding: 0.7rem 1.25rem;
      border-radius: 8px; font-size: 0.875rem; z-index: 999;
      opacity: 0; pointer-events: none; transition: opacity .25s;
      text-align: center; line-height: 1.4;
    }
    #toast.show { opacity: 1; }

    /* ── Payment banner ── */
    .payment-banner {
      border-radius: 10px; padding: 0.9rem 1.1rem;
      margin-bottom: 1.25rem; font-size: 0.9rem; font-weight: 600;
    }
    .payment-banner.success { background: var(--green-lt); color: var(--green); }
    .payment-banner.cancel  { background: #fff3cd; color: #92400e; }

    @media (max-width: 600px) {
      /* ── Nav ── */
      .credit-badge { font-size: 0.8rem; padding: 0.25rem 0.6rem; }
      .pro-badge    { font-size: 0.75rem; padding: 0.25rem 0.6rem; }
      .btn-logout   { font-size: 0.75rem; padding: 0.3rem 0.6rem; }

      /* ── Dashboard container ── */
      .dashboard { padding: 1rem 0.85rem; }
      .dash-greeting { font-size: 1.05rem; margin-bottom: 1rem; }

      /* ── Tabs ── */
      .tabs { gap: 0; }
      .tab-btn { padding: 0.7rem 0.85rem; font-size: 0.82rem; min-height: 44px; }

      /* ── Auth / onboarding cards ── */
      .auth-wrap { padding: 1.25rem 0.75rem; }
      .auth-card { padding: 1.75rem 1.1rem; border-radius: 14px; }
      .auth-card h1 { font-size: 1.35rem; }

      /* ── Job cards ── */
      .cards-grid { grid-template-columns: 1fr; gap: 0.75rem; }
      .card { padding: 1rem; }

      /* ── Job modal — bottom sheet on mobile ── */
      .job-modal-overlay { align-items: flex-end; padding: 0; }
      .job-modal {
        border-radius: 20px 20px 0 0; max-height: 92dvh; max-height: 92vh;
        max-width: 100%; transform: translateY(100%);
        padding: 1.25rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom));
      }
      .job-modal-overlay.open .job-modal { transform: translateY(0); }

      /* ── Buy credits ── */
      .credits-hero { padding: 1.25rem; }
      .credits-hero .big-num { font-size: 2.25rem; }
      .packs-grid { grid-template-columns: 1fr; gap: 0.75rem; }

      /* ── Payment banner ── */
      .payment-banner { font-size: 0.875rem; padding: 0.75rem 0.9rem; }

      /* ── iOS font-size zoom prevention (< 16px triggers auto-zoom in Safari) ── */
      .form-row input,
      .form-row select,
      .form-row textarea { font-size: 1rem; }
    }

    /* ── Skeleton loader ── */
    .skeleton-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.25rem;
      box-shadow: var(--shadow);
    }
    .skeleton-line {
      height: 14px; border-radius: 4px;
      background: linear-gradient(90deg, #e5e7eb 25%, #f0f0f0 50%, #e5e7eb 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s ease-in-out infinite;
      margin-bottom: 0.6rem;
    }
    .skeleton-line.short { width: 40%; }
    .skeleton-line.medium { width: 70%; }
    .skeleton-line.long { width: 100%; }
    .skeleton-line.heading { height: 18px; width: 55%; margin-bottom: 0.8rem; }
    .skeleton-badge {
      display: inline-block; width: 60px; height: 22px; border-radius: 4px;
      background: linear-gradient(90deg, #e5e7eb 25%, #f0f0f0 50%, #e5e7eb 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s ease-in-out infinite;
      margin-bottom: 0.6rem;
    }
    @keyframes skeleton-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }