:root {
    --primary: #8b7cff;
    --primary-600: #7a6bf0;
    --primary-soft: #efeaff;
    --primary-text: #5b4ee0;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e5e7eb;
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --warning: #f59e0b;
  }
  html, body { 
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important; 
    color: var(--ink) !important; 
    background: #fff !important; 
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
  }
  .max-w-6xl { max-width: 72rem !important; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .max-w-6xl { padding-left: 1.5rem; padding-right: 1.5rem; } }

  
  .btn-primary, .btn-primary-alt { 
    background: var(--primary) !important; 
    color: #fff !important; 
    border-radius: 0.5rem !important; 
    font-weight: 700 !important; 
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
  }
  .btn-primary:hover { background: var(--primary-600) !important; transform: translateY(-1px); }
  
  .btn-outline, .btn-outline-alt { 
    border: 1px solid #e2e8f0 !important; 
    background: #fff !important; 
    border-radius: 0.5rem !important; 
    font-weight: 700 !important;
    transition: all 0.2s;
    padding: 0.5rem 1rem;
  }
  
  .card, .card-alt, .gig-card {
    border-radius: 0.75rem !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #fff;
  }
  .card:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1) !important; }

  .hero-title { font-size: 2.5rem; line-height: 1.2; font-weight: 800; color: #0f172a; }
  @media (max-width: 640px) { .hero-title { font-size: 1.75rem; } }
  
  /* Garantir que o grid seja responsivo */
  .grid-gigs {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
  }
  @media (min-width: 640px) { .grid-gigs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .grid-gigs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  html,body{font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui}
  body.modal-open-lock { overflow: hidden; }
  .scrollbar-thin::-webkit-scrollbar{width:6px;height:6px}
  .scrollbar-thin::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
  .grad-hero{background:radial-gradient(1200px 500px at 20% 0%, #d9e8ff 0%, transparent 60%),radial-gradient(800px 400px at 90% 10%, #efe7ff 0%, transparent 60%),linear-gradient(180deg,#fafbff 0%,#ffffff 100%)}
  .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
  .star-btn{transition:transform .15s}
  .star-btn:hover{transform:scale(1.15)}
  .fade-in{animation:fade .25s ease-out}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .ring-brand{box-shadow:0 0 0 3px rgba(26,115,232,.18)}
  details>summary{list-style:none;cursor:pointer}
  details>summary::-webkit-details-marker{display:none}
  .progress{height:6px;background:#e2e8f0;border-radius:999px;overflow:hidden}
  .progress>span{display:block;height:100%;background:linear-gradient(90deg,#1a73e8,#7C3AED);border-radius:999px;transition:width .4s}

  /* ============ CHAT — typing indicator ============ */
  .typing-dot{width:6px;height:6px;border-radius:50%;background:#94a3b8;display:inline-block;animation:typingBlink 1.2s infinite ease-in-out}
  .typing-dot:nth-child(2){animation-delay:.2s}
  .typing-dot:nth-child(3){animation-delay:.4s}
  @keyframes typingBlink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}

  /* ============ SKELETON LOADING ============ */
  .skel{position:relative;overflow:hidden;background:#e9edf3}
  .skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    animation:skelShimmer 1.4s infinite}
  @keyframes skelShimmer{100%{transform:translateX(100%)}}
  html.dark .skel{background:var(--surf-800)}
  html.dark .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}

  /* ============ FILTER BAR (now static — no longer follows scroll) ============ */
  .filters-sticky{
    position:static !important;top:auto;z-index:auto;
    margin-left:-1.25rem;margin-right:-1.25rem;padding:.75rem 1.25rem;margin-bottom:1.5rem;
    background:#ffffff;border-bottom:1px solid #e2e8f0;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
  }
  html.dark .filters-sticky{background:var(--surf-900);border-bottom-color:rgba(255,255,255,.07);box-shadow:0 2px 12px rgba(0,0,0,.4)}
  /* Pin fallback disabled: keep bar in its natural position even if JS adds the class */
  .filters-sticky.is-pinned{
    position:static !important;top:auto;left:auto;right:auto;margin:0 -1.25rem 1.5rem;padding:.75rem 1.25rem;
    border-radius:0;box-shadow:0 2px 8px rgba(15,23,42,.04);
  }
  html.dark .filters-sticky.is-pinned{box-shadow:0 2px 12px rgba(0,0,0,.4)}
  .filters-sticky-spacer,.filters-sticky-spacer.is-active{display:none !important;height:0 !important}

  /* Kill old sticky helpers on filter bar only — aside sidebar now uses inline sticky */
  .no-stick,.no-stick.sticky{position:static !important;top:auto !important}

  /* ============ GLOBAL & SERVICE PAGE (100% SOURCE FIDELITY) ============ */
  :root {
    --primary: #8b7cff;
    --primary-600: #7a6bf0;
    --primary-soft: #efeaff;
    --primary-text: #5b4ee0;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e5e7eb;
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --warning: #f59e0b;
  }
  body { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
  .btn-primary-alt { background: var(--primary); color: #fff; transition: background .15s; border-radius: 0.5rem; font-weight: 700; }
  .btn-primary-alt:hover { background: var(--primary-600); }
  .btn-outline-alt { border: 1px solid #e2e8f0; color: #0f172a; background: #fff; transition: all .15s; border-radius: 0.5rem; font-weight: 700; }
  .btn-outline-alt:hover { border-color: #c7c0ff; color: var(--primary-text); }
  .tab-alt { border-bottom: 2px solid transparent; color: #64748b; transition: all .15s; font-size: 14px; }
  .tab-alt:hover { color: #0f172a; }
  .tab-alt-active { color: #0f172a; border-color: var(--primary); font-weight: 700; }
  .pkg-card-alt { transition: all .2s ease; border: 1px solid #e5e7eb; background: #fff; border-radius: 0.75rem; overflow: hidden; }
  .pkg-card-alt.active { border-color: var(--primary); box-shadow: 0 8px 24px -10px rgba(139,124,255,.35); }
  .thumb-alt { border: 2px solid transparent; cursor: pointer; transition: all .15s; border-radius: 0.5rem; }
  .thumb-alt.active { border-color: var(--primary); }
  .thumb-alt:hover { opacity: .85; }
  .accordion-alt { border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem; transition: all .2s; }
  .accordion-alt summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); font-size: 14px; }
  .accordion-alt summary::-webkit-details-marker { display: none; }
  .accordion-alt summary .ic { transition: transform .2s; color: #64748b; }
  .accordion-alt[open] summary .ic { transform: rotate(180deg); }
  .star-row-alt i { color: var(--warning); }
  .chip-alt { border: 1px solid var(--line); background: #fff; color: #475569; transition: all .15s; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
  .chip-alt:hover { border-color: #c7c0ff; color: var(--primary-text); background: #fafaff; }
  .glass { backdrop-filter: blur(8px); background: rgba(255,255,255,0.8); }
  .card-alt { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; background: #fff; }
  .card-alt:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(91,78,224,0.18); border-color: #c7c0ff; }
  .card-alt .gig-img { transition: transform .4s ease; }
  .card-alt:hover .gig-img { transform: scale(1.06); }
  


  /* ============ GIG CARD (Fiverr-style, bulletproof) ============ */
  .gig-card{display:flex;flex-direction:column;min-width:0;width:100%}
  .gig-thumb{position:relative;width:100%;padding-bottom:53%;background:#f1f5f9}
  .gig-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .gig-title{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;text-overflow:ellipsis;min-height:40px;word-break:break-word;
  }
  html.dark .gig-thumb{background:var(--surf-800)}

  /* ============ GALLERY DRAG-DROP (owner only) ============ */
  .gig-thumb-drag{cursor:grab;transition:transform .15s, box-shadow .15s, opacity .15s}
  .gig-thumb-drag:active{cursor:grabbing}
  .gig-thumb-drag.dragging{opacity:.35;transform:scale(.92)}
  .gig-thumb-drag.drag-over{transform:scale(1.06);box-shadow:0 0 0 3px rgba(26,115,232,.45);border-radius:.5rem}

  /* ============ DARK MODE — Interlink dApp vibe ============ */
  html.dark{color-scheme:dark}
  html.dark body{background:var(--surf-950);color:#e2e8f0}
html.dark {
  --ink-50:  #1e293b;
  --ink-100: #1e293b;
  --ink-200: #334155;
  --ink-300: #475569;
  --ink-400: #64748b;
  --ink-500: #94a3b8;
  --ink-600: #cbd5e1;
  --ink-700: #e2e8f0;
  --ink-800: #f1f5f9;
  --ink-900: #f8fafc;
  --ink-text: #e7ecf5;
  --ink-muted: #94a3b8;
  --surface: #131c2e;
  --surface-alt: #1e293b;
}
  html.dark .scrollbar-thin::-webkit-scrollbar-thumb{background:var(--surf-600)}
  html.dark .grad-hero{
    background:
      radial-gradient(900px 420px at 18% 0%, rgba(34,211,238,.12) 0%, transparent 60%),
      radial-gradient(700px 360px at 88% 10%, rgba(167,139,250,.14) 0%, transparent 60%),
      linear-gradient(180deg,#06080f 0%, #0a0f1e 100%);
  }
  html.dark .progress{background:var(--surf-700)}
  html.dark .progress>span{background:linear-gradient(90deg,var(--neon-cyan),var(--neon-violet))}

  /* Map common Tailwind utilities to dark surfaces */
  html.dark .bg-white{background-color:var(--surf-900) !important}
  #ns-days::-webkit-outer-spin-button,#ns-days::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  #ns-days{-moz-appearance:textfield}
  html.dark .bg-white\/85{background-color:var(--surf-900)C7 !important}
  html.dark .bg-white\/95{background-color:var(--surf-900) !important}
  html.dark .bg-white\/60{background-color:var(--surf-900)99 !important}
  html.dark .text-ink-900{color:#e7ecf5 !important}
  html.dark .text-ink-700{color:#cbd5e1 !important}
  html.dark .text-ink-500{color:#94a3b8 !important}
  html.dark .text-ink-300{color:#64748b !important}
  html.dark .border-ink-100{border-color:rgba(255,255,255,.07) !important}
  html.dark .bg-ink-100\/60,html.dark .bg-ink-100\/40,html.dark .bg-ink-100\/30,html.dark .hover\:bg-ink-100\/40:hover,html.dark .hover\:bg-ink-100\/50:hover,html.dark .hover\:bg-ink-100\/70:hover{background-color:rgba(255,255,255,.04) !important}
  html.dark .bg-ink-100{background-color:var(--surf-700) !important}
  html.dark .bg-brand-50,html.dark .bg-brand-50\/50,html.dark .bg-brand-50\/40{background-color:var(--brand-500)15 !important}
  html.dark .bg-brand-100,html.dark .hover\:bg-brand-100:hover{background-color:rgba(34,211,238,.16) !important}
  html.dark .text-brand-700,html.dark .text-brand-500{color:var(--neon-cyan) !important}
  html.dark .border-brand-100,html.dark .border-brand-300,html.dark .hover\:border-brand-300:hover{border-color:var(--brand-500)55 !important}
  html.dark .bg-amber-50{background-color:rgba(245,158,11,.10) !important}
  html.dark .text-amber-700,html.dark .text-amber-800{color:#fbbf24 !important}
  html.dark .border-amber-100{border-color:rgba(245,158,11,.25) !important}
  html.dark .bg-emerald-50,html.dark .bg-emerald-50\/40{background-color:rgba(16,185,129,.10) !important}
  html.dark .text-emerald-700,html.dark .text-emerald-600{color:#34d399 !important}
  html.dark .border-emerald-100{border-color:rgba(16,185,129,.25) !important}
  html.dark .bg-rose-50,html.dark .hover\:bg-rose-100:hover{background-color:rgba(244,63,94,.12) !important}
  html.dark .text-rose-700,html.dark .text-rose-600{color:#fb7185 !important}
  html.dark .border-rose-100{border-color:rgba(244,63,94,.25) !important}
  html.dark .bg-violet-50,html.dark .bg-violet-50\/40{background-color:rgba(167,139,250,.10) !important}
  html.dark .text-violet-700,html.dark .text-violet-500{color:#a78bfa !important}
  html.dark .border-violet-100{border-color:rgba(167,139,250,.25) !important}
  html.dark .bg-gradient-to-b.from-white,html.dark .from-white{--tw-gradient-from:var(--surf-900) !important}
  html.dark .from-brand-50,html.dark .via-white{--tw-gradient-from:var(--surf-900) !important;--tw-gradient-via:var(--surf-900) !important}
  html.dark .to-violet-50\/40,html.dark .to-violet-50{--tw-gradient-to:var(--neon-violet)0D !important}
  html.dark input,html.dark select,html.dark textarea{background-color:var(--surf-900);color:#e2e8f0;border-color:rgba(255,255,255,.08)}
  html.dark .shadow-card{box-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}
  html.dark .shadow-pop{box-shadow:0 14px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04)}

  /* Glow on primary CTA */
  .cta-glow{box-shadow:0 0 0 1px rgba(34,211,238,.45), 0 8px 28px rgba(34,211,238,.28);transition:box-shadow .25s}
  .cta-glow:hover{box-shadow:0 0 0 1px rgba(34,211,238,.7), 0 12px 38px rgba(34,211,238,.45)}

  
/* ══════════════════════════════════════════════════════════
   THEME SYSTEM — CSS Custom Properties
   ══════════════════════════════════════════════════════════ */
:root {
  --brand-50: #f5f3ff;
  --brand-100: #ede9fe;
  --brand-200: #ddd6fe;
  --brand-300: #c4b5fd;
  --brand-400: #a78bfa;
  --brand-500: #8b5cf6;
  --brand-600: #7c3aed;
  --brand-700: #6d28d9;
  --brand-800: #5b21b6;
  --brand-900: #4c1d95;
  --sonic: #7C3AED;
  --gold-accent: #c9962e;
  --neon-cyan: #22d3ee;
  --neon-lime: #a3e635;
  --neon-violet: #a78bfa;
  --surf-950: #0f0f0f;
  --surf-900: #1c1c1c;
  --surf-800: #1e1e1e;
  --surf-700: #2a2a2a;
  --surf-600: #3a3a3a;
  --hero-light: radial-gradient(1200px 500px at 20% 0%, #d9e8ff 0%, transparent 60%),radial-gradient(800px 400px at 90% 10%, #efe7ff 0%, transparent 60%),linear-gradient(180deg,#fafbff 0%,#ffffff 100%);
  --hero-dark: linear-gradient(135deg,#0f0f0f 0%,#1c1c1c 45%,#1e1e1e 100%);
  --banner-dark: linear-gradient(135deg,#1c1c1c 0%,#1e1e1e 50%,#2a2a2a 100%);
  --banner-light: linear-gradient(135deg,#eef5ff 0%,#f5f0ff 50%,#dbeafe 100%);
  /* Cor única pra toda a homepage — estilo Obsidian, sem variação entre seções */
  --home-bg: #ffffff;
  --home-border: #f1f5f9;
}
html.dark {
  --home-bg: #080808;
  --home-border: rgba(255,255,255,.08);
}
:root {
  /* Ink scale — light mode */
  --ink-50:  #f8fafc;
  --ink-100: #f1f5f9;
  --ink-200: #e2e8f0;
  --ink-300: #cbd5e1;
  --ink-400: #94a3b8;
  --ink-500: #64748b;
  --ink-600: #475569;
  --ink-700: #334155;
  --ink-800: #1e293b;
  --ink-900: #0f172a;
  --surface:     #ffffff;
  --surface-alt: #f8fafc;
}







/* Glass header */
  .glass{backdrop-filter: blur(14px) saturate(160%);}
  html.dark .glass{background:rgba(10,15,30,.55) !important;border-color:rgba(255,255,255,.06) !important}
  /* ============ ACCESSIBILITY ============ */
  /* Skip-to-content link — visible only when focused via Tab */
  .skip-link{
    position:fixed;top:-100px;left:1rem;z-index:200;
    background:#1a73e8;color:#fff;font-weight:700;
    padding:.65rem 1rem;border-radius:.75rem;
    box-shadow:0 8px 24px rgba(26,115,232,.35);
    transition:top .15s ease-out;text-decoration:none;font-size:.875rem;
  }
  .skip-link:focus,.skip-link:focus-visible{top:.75rem;outline:none}
  /* Strong focus ring for every interactive element */
  :focus-visible{outline:none}
  a:focus-visible,button:focus-visible,
  input:focus-visible,select:focus-visible,textarea:focus-visible,
  [role="button"]:focus-visible,[tabindex="0"]:focus-visible,
  summary:focus-visible{
    outline:2px solid #1a73e8;outline-offset:2px;
    border-radius:.5rem;box-shadow:0 0 0 4px rgba(26,115,232,.18);
  }
  html.dark a:focus-visible,html.dark button:focus-visible,
  html.dark input:focus-visible,html.dark select:focus-visible,html.dark textarea:focus-visible,
  html.dark [role="button"]:focus-visible,html.dark [tabindex="0"]:focus-visible,
  html.dark summary:focus-visible{
    outline-color:#5c91ff;box-shadow:0 0 0 4px rgba(92,145,255,.28);
  }
  /* Card focus — used when a card is wrapped by an <a> or has tabindex */
  .gig-card a:focus-visible,
  .gig-card:focus-within{box-shadow:0 0 0 2px #1a73e8,0 0 0 6px rgba(26,115,232,.18)}
  /* Respect reduced-motion users */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  }
  /* Screen-reader-only utility */
  .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}

  /* ============ DROPDOWN MENUS — legibilidade garantida ============ */
  [data-fmenu],
  #lang-menu, #wallet-menu {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.08), 0 12px 40px -4px rgba(0,0,0,.16) !important;
    border: 1px solid #d1d5db !important;
  }






  /* ══════════════════════════════════════════════════════════
     CATEGORY STRIP — Fiverr-exact: no scrollbar, gradient arrows
     ══════════════════════════════════════════════════════════ */
  #cat-strip-wrap {
    position: relative;
    overflow: hidden;
  }
  .cat-strip-inner {
    display: flex;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* Sem scroll-behavior:smooth aqui — evita pulos indesejados no re-render */
    overscroll-behavior-x: contain;
  }
  .cat-strip-inner::-webkit-scrollbar { display: none; }

  .cat-strip-btn {
    flex-shrink: 0;
    padding: 0 1rem;
    height: 42px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    color: #6b7280;
    transition: color .15s, border-color .15s;
    background: none;
    white-space: nowrap;
  }
  .cat-strip-btn:hover { color: #111827; }
  .cat-strip-btn--active {
    color: #111827 !important;
    border-bottom-color: #111827 !important;
    font-weight: 700;
  }

  /* Arrow buttons — small, with gradient fade (Fiverr style) */
  .cat-strip-arrow {
    position: absolute;
    top: 0; bottom: 0;
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: #374151;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    transition: color .15s;
  }
  .cat-strip-arrow:hover { color: #111827; }
  .cat-strip-arrow-l {
    left: 0;
    background: linear-gradient(to right, #ffffff 60%, transparent);
  }
  .cat-strip-arrow-r {
    right: 0;
    background: linear-gradient(to left, #ffffff 60%, transparent);
  }
  .cat-strip-arrow.hidden { display: none !important; }

  /* Dark mode overrides */
  html.dark .cat-strip-btn { color: #9ca3af; }
  html.dark .cat-strip-btn:hover { color: #f9fafb; }
  html.dark .cat-strip-btn--active { color: #f9fafb !important; border-bottom-color: #f9fafb !important; }
  html.dark .cat-strip-arrow { color: #9ca3af; }
  html.dark .cat-strip-arrow:hover { color: #f9fafb; }
  html.dark .cat-strip-arrow-l { background: linear-gradient(to right, var(--surf-950) 60%, transparent); }
  html.dark .cat-strip-arrow-r { background: linear-gradient(to left, var(--surf-950) 60%, transparent); }
  html.dark #cat-strip-wrap { border-top-color: rgba(255,255,255,.07); }

  /* ══════════════════════════════════════════════════════════
     PAGINATION — Fiverr-exact: plain numbers, underline active
     ══════════════════════════════════════════════════════════ */
  .pgn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 2.5rem;
    padding-bottom: 1rem;
  }
  .pgn-btn {
    width: 2.25rem; height: 2.25rem;
    display: grid; place-items: center;
    font-size: 14px; font-weight: 500;
    color: #6b7280;
    background: none; border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .12s;
    border-radius: 0;
    padding-bottom: 1px;
  }
  .pgn-btn:hover { color: #111827; }
  .pgn-btn--active {
    color: #111827 !important;
    border-bottom-color: #111827 !important;
    font-weight: 700;
  }
  .pgn-dots {
    width: 2rem; height: 2.25rem;
    display: grid; place-items: center;
    color: #9ca3af; font-size: 13px;
    user-select: none;
  }
  .pgn-arrow {
    width: 2rem; height: 2rem;
    display: grid; place-items: center;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    color: #6b7280;
    background: none; cursor: pointer;
    transition: border-color .12s, color .12s;
    margin: 0 4px;
  }
  .pgn-arrow:hover { border-color: #6b7280; color: #111827; }
  .pgn-arrow:disabled { opacity: .3; cursor: not-allowed; }

  html.dark .pgn-btn { color: #9ca3af; }
  html.dark .pgn-btn:hover { color: #f9fafb; }
  html.dark .pgn-btn--active { color: #f9fafb !important; border-bottom-color: #f9fafb !important; }
  html.dark .pgn-arrow { border-color: rgba(255,255,255,.15); color: #9ca3af; }
  html.dark .pgn-arrow:hover { border-color: rgba(255,255,255,.4); color: #f9fafb; }
  html.dark .pgn-dots { color: #4b5563; }

  /* ══════════════════════════════════════════════════════════
     DROPDOWN MENUS — strong shadow + border so they lift off
     ══════════════════════════════════════════════════════════ */
  [data-fmenu], #lang-menu, #wallet-menu {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.08),
                0 16px 48px -4px rgba(0,0,0,.18) !important;
    border: 1px solid #d1d5db !important;
  }


  /* Header bg — white in light, dark surface in dark */
  .bg-header { background: #ffffff; }
  html.dark .bg-header { background: var(--surf-900); }
  /* Header search in dark mode */
  #header-search, form.header-search-form { position: relative; }
  html.dark #header-search,
  html.dark form.header-search-form {
    background: var(--surf-700) !important;
    border-color: rgba(255,255,255,.1) !important;
  }
  html.dark #header-search input,
  html.dark form.header-search-form input {
    color: #e2e8f0;
  }
  /* Mobile search bar dark */
  html.dark .mobile-search-form {
    background: var(--surf-700) !important;
    border-color: rgba(255,255,255,.1) !important;
  }


  /* ═══ HERO — estilo V1 Obsidian: preto absoluto, badge, busca minimal, stats em vez de partner strip ═══ */
  html.dark #hero-section { background: var(--home-bg); }
  html:not(.dark) #hero-section { background: var(--home-bg); }
  html.dark .hero-title-text { color:#ffffff; }
  html:not(.dark) .hero-title-text { color: var(--surf-950); }
  html.dark .hero-badge { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); }
  html:not(.dark) .hero-badge { border-color: rgba(0,0,0,0.1); background: rgba(0,0,0,0.03); color: rgba(0,0,0,0.5); }
  html.dark .hero-stat-num { color:#ffffff; }
  html:not(.dark) .hero-stat-num { color: var(--surf-950); }
  html.dark .hero-stat-label { color: rgba(255,255,255,0.35); }
  html:not(.dark) .hero-stat-label { color: rgba(0,0,0,0.4); }
  html.dark .hero-subtitle { color: rgba(255,255,255,0.5); }
  html:not(.dark) .hero-subtitle { color: rgba(0,0,0,0.55); }
  html.dark .hero-outline-btn { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: #ffffff; }
  html.dark .hero-outline-btn:hover { background: rgba(255,255,255,0.08); }
  html:not(.dark) .hero-outline-btn { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.03); color: var(--surf-950); }
  html:not(.dark) .hero-outline-btn:hover { background: rgba(0,0,0,0.06); }
  html.dark .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -10%,rgba(124,58,237,0.18) 0%,transparent 70%); }
  html:not(.dark) .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -10%,rgba(124,58,237,0.10) 0%,transparent 70%); }
  html.dark .hero-search-bar { border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.05); }
  html:not(.dark) .hero-search-bar { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.02); }
  html.dark .hero-search-icon { color: rgba(255,255,255,0.3); }
  html:not(.dark) .hero-search-icon { color: rgba(0,0,0,0.35); }
  html.dark .hero-search-input { color:#fff; }
  html.dark .hero-search-input::placeholder { color: rgba(255,255,255,0.3); }
  html:not(.dark) .hero-search-input { color: var(--surf-950); }
  html:not(.dark) .hero-search-input::placeholder { color: rgba(0,0,0,0.35); }
  html.dark .hero-search-submit { color: rgba(255,255,255,0.4); border-left:1px solid rgba(255,255,255,0.10); }
  html.dark .hero-search-submit:hover { color:#fff; }
  html:not(.dark) .hero-search-submit { color: rgba(0,0,0,0.45); border-left:1px solid rgba(0,0,0,0.12); }
  html:not(.dark) .hero-search-submit:hover { color: var(--surf-950); }
  html.dark .hero-dropdown { background:#1c1c1c; border-color: rgba(255,255,255,0.1); }
  html:not(.dark) .hero-dropdown { background:#fff; border-color: rgba(0,0,0,0.1); }
  html.dark .hero-tag { color: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
  html.dark .hero-tag:hover { color: rgba(255,255,255,0.7); }
  html:not(.dark) .hero-tag { color: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.02); }
  html:not(.dark) .hero-tag:hover { color: var(--surf-950); }
  html.dark .hero-partner-label,html.dark .hero-partner-item { color: rgba(255,255,255,0.3); }
  html:not(.dark) .hero-partner-label,html:not(.dark) .hero-partner-item { color: rgba(0,0,0,0.4); }
  html.dark .hero-divider { background: rgba(255,255,255,0.10); }
  html:not(.dark) .hero-divider { background: rgba(0,0,0,0.12); }
  .hero-search-btn { background:#0b1220; }
  .hero-search-btn:hover { background:#1f2937; }
  .hero-tag { color:#ffffff; border:1.5px solid rgba(255,255,255,0.55); background:transparent; }
  .hero-tag:hover { border-color:#ffffff; background:rgba(255,255,255,0.1); }
  .hero-partner-label { color: rgba(255,255,255,0.5); }
  .hero-partner-item { color: rgba(255,255,255,0.8); }
  .hero-divider { background: rgba(255,255,255,0.25); }

  /* ═══ BANNER FREELANCER ADAPTATIVO ═══ */
  html.dark .freelancer-banner { background: var(--banner-dark); }
  html.dark .banner-badge { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); color: rgba(255,255,255,0.70); }
  html.dark .banner-title { color: #ffffff; }
  html.dark .banner-sub { color: rgba(255,255,255,0.60); }
  html.dark .banner-cta { background: #ffffff; color: var(--surf-950); }
  html.dark .banner-cta:hover { background: #eef5ff; color: #1a73e8; }

  html:not(.dark) .freelancer-banner { background: var(--banner-light); border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
  html:not(.dark) .banner-badge { background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.20); color: #7C3AED; }
  html:not(.dark) .banner-title { color: #0b1220; }
  html:not(.dark) .banner-sub { color: #475569; }
  html:not(.dark) .banner-cta { background: #7C3AED; color: #ffffff; }
  html:not(.dark) .banner-cta:hover { background: #6d28d9; color: #ffffff; }

  /* Header search dropdown — dark mode */
  html.dark #header-search-dropdown { background: #1e293b !important; border-color: rgba(255,255,255,.08) !important; }


  /* ═══ WHY INTERWORK ═══ */
  html:not(.dark) .why-iw-section { background: var(--home-bg); }
  html.dark .why-iw-section { background: var(--home-bg); }
  html:not(.dark) .why-iw-title { color: #0b1220; }
  html.dark .why-iw-title { color: #f9fafb; }
  html:not(.dark) .why-iw-card { background: #ffffff; border-color: #e2e8f0; }
  html.dark .why-iw-card { background: var(--surf-900); border-color: rgba(255,255,255,0.07); }
  html:not(.dark) .why-iw-label { color: #0b1220; }
  html.dark .why-iw-label { color: #f9fafb; }
  html:not(.dark) .why-iw-sub { color: #475569; }
  html.dark .why-iw-sub { color: #9ca3af; }

  /* ═══ STRATEGIC PARTNER ═══ */
  html:not(.dark) .partner-section { background: var(--home-bg); border-color: var(--home-border); }
  html.dark .partner-section { background: var(--home-bg); border-color: var(--home-border); }
  html:not(.dark) .partner-badge { background: #f5f0ff; color: #7C3AED; }
  html.dark .partner-badge { background: rgba(99,102,241,0.15); color: #a5b4fc; }
  html:not(.dark) .partner-logo-wrap { background: #f1f5f9; border-color: #e2e8f0; }
  html.dark .partner-logo-wrap { background: var(--surf-800); border-color: rgba(255,255,255,0.08); }
  html:not(.dark) .partner-logo-icon { color: #7C3AED; }
  html.dark .partner-logo-icon { color: #a78bfa; }
  html:not(.dark) .partner-title { color: #0b1220; }
  html.dark .partner-title { color: #f9fafb; }
  html:not(.dark) .partner-sub { color: #475569; }
  html.dark .partner-sub { color: #9ca3af; }
  html:not(.dark) .partner-btn { background: #0b1220; color: #ffffff; }
  html:not(.dark) .partner-btn:hover { background: #7C3AED; }
  html.dark .partner-btn { background: #a78bfa; color: var(--surf-950); }
  html.dark .partner-btn:hover { background: #c4b5fd; }

  /* ═══ POWERED BY INTERLINK ═══ */
  html:not(.dark) .powered-section { background: #f8fafc; border-top: 1px solid #e2e8f0; }
  html.dark .powered-section { background: var(--surf-950); border-top: 1px solid rgba(255,255,255,0.06); }
  html:not(.dark) .powered-text { color: #94a3b8; }
  html.dark .powered-text { color: #4b5563; }

  /* ═══ OVERVIEW ═══ */
  html:not(.dark) .ow-section{background:var(--home-bg)}
  html.dark .ow-section{background:var(--home-bg)}
  html:not(.dark) .ow-kicker{color:var(--brand-500)}
  html.dark .ow-kicker{color:var(--sonic)}
  html:not(.dark) .ow-line{background:var(--brand-500)}
  html.dark .ow-line{background:var(--sonic)}
  html:not(.dark) .ow-title{color:#0b1220}
  html.dark .ow-title{color:#f9fafb}
  html:not(.dark) .ow-accent{color:var(--brand-500)}
  html.dark .ow-accent{color:var(--sonic)}
  html:not(.dark) .ow-sub{color:#475569}
  html.dark .ow-sub{color:#9ca3af}
  html:not(.dark) .ow-stat-card{background:#fff;border-color:#e2e8f0}
  html.dark .ow-stat-card{background:var(--surf-900);border-color:rgba(255,255,255,.07)}
  html:not(.dark) .ow-stat-num{color:var(--brand-500)}
  html.dark .ow-stat-num{color:var(--sonic)}
  html:not(.dark) .ow-stat-label{color:#0b1220}
  html.dark .ow-stat-label{color:#f9fafb}
  html:not(.dark) .ow-stat-sub{color:#64748b}
  html.dark .ow-stat-sub{color:#6b7280}

  /* ═══ HOW IT WORKS ═══ */
  html:not(.dark) .hw-section{background:var(--home-bg)}
  html.dark .hw-section{background:var(--home-bg)}
  html:not(.dark) .hw-kicker{color:var(--brand-500)}
  html.dark .hw-kicker{color:var(--sonic)}
  html:not(.dark) .hw-line{background:var(--brand-500)}
  html.dark .hw-line{background:var(--sonic)}
  html:not(.dark) .hw-title{color:#0b1220}
  html.dark .hw-title{color:#f9fafb}
  html:not(.dark) .hw-sub{color:#475569}
  html.dark .hw-sub{color:#9ca3af}
  html:not(.dark) .hw-card{background:#f8fafc;border-color:#e2e8f0}
  html.dark .hw-card{background:var(--surf-900);border-color:rgba(255,255,255,.07)}
  html:not(.dark) .hw-num{color:var(--sonic)}
  html.dark .hw-num{color:var(--sonic)}
  html:not(.dark) .hw-card-title{color:#0b1220}
  html.dark .hw-card-title{color:#f9fafb}
  html:not(.dark) .hw-card-sub{color:#475569}
  html.dark .hw-card-sub{color:#9ca3af}
  html:not(.dark) .hw-arrow-bg{background:var(--brand-100)}
  html.dark .hw-arrow-bg{background:rgba(255,255,255,.06)}
  html:not(.dark) .hw-arrow-icon{color:var(--brand-500)}
  html.dark .hw-arrow-icon{color:#9ca3af}
  html:not(.dark) .hw-tl-line{background:#e5e7eb}
  html.dark .hw-tl-line{background:rgba(255,255,255,.10)}
  html:not(.dark) .hw-tl-dot{background:#fafafa;border-color:#e5e7eb;color:#6d28d9}
  html.dark .hw-tl-dot{background:#0d0d0d;border-color:rgba(255,255,255,.12);color:var(--sonic)}
  html:not(.dark) .hw-tl-title{color:#111}
  html.dark .hw-tl-title{color:#f9fafb}
  html:not(.dark) .hw-tl-sub{color:#9ca3af}
  html.dark .hw-tl-sub{color:rgba(255,255,255,.4)}

  /* Category tiles — Obsidian: monocromático, vira roxo no hover */
  html:not(.dark) .cat-tiles-section { background: var(--home-bg); border-color: var(--home-border); }
  html.dark .cat-tiles-section { background: var(--home-bg); border-color: var(--home-border); }
  html:not(.dark) .cat-tile { background:#fff; border-color:#f1f5f9; }
  html.dark .cat-tile { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); }
  .cat-tile:hover { border-color:#8b5cf6 !important; }
  html:not(.dark) .cat-tile-icon-wrap { background:#f8fafc; }
  html.dark .cat-tile-icon-wrap { background:rgba(255,255,255,.05); }
  .cat-tile:hover .cat-tile-icon-wrap { background:rgba(139,92,246,.12); }
  html:not(.dark) .cat-tile-icon { color:#57606b; }
  html.dark .cat-tile-icon { color:rgba(255,255,255,.55); }
  .cat-tile:hover .cat-tile-icon { color:#8b5cf6; }
  html:not(.dark) .cat-tile-label { color:#374151; }
  html.dark .cat-tile-label { color:rgba(255,255,255,.6); }
  .cat-tile:hover .cat-tile-label { color:#8b5cf6; }

  /* ═══ BENEFITS ═══ */
  html:not(.dark) .bn-section{background:var(--home-bg)}
  html.dark .bn-section{background:var(--home-bg)}
  html:not(.dark) .bn-kicker{color:var(--brand-500)}
  html.dark .bn-kicker{color:var(--sonic)}
  html:not(.dark) .bn-line{background:var(--brand-500)}
  html.dark .bn-line{background:var(--sonic)}
  html:not(.dark) .bn-title{color:#0b1220}
  html.dark .bn-title{color:#f9fafb}
  html:not(.dark) .bn-sub{color:#475569}
  html.dark .bn-sub{color:#9ca3af}
  html:not(.dark) .bn-card{background:#fff;border-color:#e2e8f0}
  html.dark .bn-card{background:var(--surf-900);border-color:rgba(255,255,255,.07)}
  html:not(.dark) .bn-tag{background:var(--brand-50);color:var(--brand-600)}
  html.dark .bn-tag{background:rgba(255,255,255,.06);color:var(--sonic)}
  html:not(.dark) .bn-card-title{color:#0b1220}
  html.dark .bn-card-title{color:#f9fafb}
  html:not(.dark) .bn-card-sub{color:#475569}
  html.dark .bn-card-sub{color:#9ca3af}

  /* ═══ COMMUNITY & REWARDS ═══ */
  html:not(.dark) .rw-section{background:#fff}
  html.dark .rw-section{background:var(--surf-950)}
  html:not(.dark) .rw-kicker{color:var(--brand-500)}
  html.dark .rw-kicker{color:var(--sonic)}
  html:not(.dark) .rw-line{background:var(--brand-500)}
  html.dark .rw-line{background:var(--sonic)}
  html:not(.dark) .rw-title{color:#0b1220}
  html.dark .rw-title{color:#f9fafb}
  html:not(.dark) .rw-sub{color:#475569}
  html.dark .rw-sub{color:#9ca3af}
  html:not(.dark) .rw-card{background:#f8fafc;border-color:#e2e8f0}
  html.dark .rw-card{background:var(--surf-900);border-color:rgba(255,255,255,.07)}
  html:not(.dark) .rw-icon{background:var(--brand-50)}
  html.dark .rw-icon{background:rgba(255,255,255,.06)}
  html:not(.dark) .rw-icon-color{color:var(--brand-500)}
  html.dark .rw-icon-color{color:var(--sonic)}
  html:not(.dark) .rw-card-title{color:#0b1220}
  html.dark .rw-card-title{color:#f9fafb}
  html:not(.dark) .rw-card-sub{color:#475569}
  html.dark .rw-card-sub{color:#9ca3af}
  html:not(.dark) .rw-cta{background:linear-gradient(135deg,var(--brand-50) 0%,#f5f0ff 100%);border-color:var(--brand-100)}
  html.dark .rw-cta{background:linear-gradient(135deg,var(--surf-900) 0%,rgba(124,58,237,.15) 100%);border-color:rgba(255,255,255,.07)}
  html:not(.dark) .rw-cta-title{color:#0b1220}
  html.dark .rw-cta-title{color:#f9fafb}
  html:not(.dark) .rw-cta-sub{color:#475569}
  html.dark .rw-cta-sub{color:#9ca3af}
  html:not(.dark) .rw-cta-btn{background:var(--brand-500);color:#fff}
  html:not(.dark) .rw-cta-btn:hover{background:var(--brand-600)}
  html.dark .rw-cta-btn{background:var(--sonic);color:#fff}
  html.dark .rw-cta-btn:hover{opacity:.9}

  /* ═══ ATV-INSPIRED SECTION TITLES (serif + gold underline) ═══ */
  .atv-title{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:800;
    display:block;
    position:relative;
    padding-bottom:.45em;
    margin-bottom:.3em;
  }
  .atv-title::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:84px; height:3px;
    background:linear-gradient(90deg,var(--gold-accent) 0%, var(--gold-accent) 70%, transparent 100%);
    border-radius:2px;
  }
  .atv-title.atv-title-center::after{
    left:50%; transform:translateX(-50%);
  }
  .atv-num{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:800;
  }
  .atv-connector{
    width:22px;height:22px;border-radius:9999px;
    display:flex;align-items:center;justify-content:center;
    transition:transform .25s ease;
  }
  .atv-card{ transition:transform .25s ease, box-shadow .25s ease; }
  .atv-card:hover{ transform:translateY(-4px); }
  html:not(.dark) .atv-card:hover{ box-shadow:0 12px 28px rgba(15,23,42,.08); }
  html.dark .atv-card:hover{ box-shadow:0 12px 28px rgba(0,0,0,.35); }
  .atv-icon-float{ animation:atvFloat 5s ease-in-out infinite; }
  @keyframes atvFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

  /* Estilos para fidelidade visual ao print */
  .bg-brand-500 { background-color: #9b87f5 !important; } /* Roxo do print */
  .text-brand-500 { color: #9b87f5 !important; }
  .border-brand-500 { border-color: #9b87f5 !important; }
  .shadow-brand-500\/20 { box-shadow: 0 10px 15px -3px rgba(155, 135, 245, 0.2), 0 4px 6px -2px rgba(155, 135, 245, 0.1); }
  .ring-brand-500\/20 { --tw-ring-color: rgba(155, 135, 245, 0.2); }
  .hover\:bg-brand-600:hover { background-color: #7e69f2 !important; }
  .text-sonic { color: #000000 !important; font-weight: 800; } /* Preço em preto negrito no print */

  /* ═══ TEMPLATE REFINEMENTS ═══ */
  .scrollbar-hide::-webkit-scrollbar { display: none; }
  .scrollbar-hide { scrollbar-width: none; }
  
  /* Melhorias de cards com efeito hover */
  .gig-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
  .gig-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(139, 124, 255, 0.18); }
  .gig-card:hover .gig-thumb { border-color: #c7c0ff; }
  .gig-card .gig-img { transition: transform 0.4s ease; }
  .gig-card:hover .gig-img { transform: scale(1.06); }
  
  /* Badges de status */
  .badge-best { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(6px); }
  .badge-rising { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(6px); }
  
  /* Chips e Pills */
  .chip { border: 1px solid #e5e7eb; background: #fff; color: #475569; transition: all 0.15s; }
  .chip:hover { border-color: #c7c0ff; color: #5b4ee0; background: #fafaff; }
  .pill { border: 1px solid #e5e7eb; color: #334155; background: #fff; transition: all 0.15s; }
  .pill:hover { border-color: #c7c0ff; color: #5b4ee0; }
  .pill-active { background: #a99cff; color: #fff; border-color: transparent; }
  
  /* Focus states melhorados */
  input:focus { outline: none; }
  .focus-within\:border-brand-400:focus-within { border-color: #a99cff; }
  
  /* Animações suaves */
  .transition-all { transition: all 0.15s ease; }
  
  /* Brand colors refinadas */
  :root {
    --brand-500: #8b7cff;
    --brand-600: #7a6bf0;
    --brand-50: #efeaff;
  }
  
  .bg-brand-500 { background-color: #8b7cff; }
  .hover\:bg-brand-600:hover { background-color: #7a6bf0; }
  .text-brand-500 { color: #8b7cff; }
  .border-brand-400 { border-color: #a99cff; }
  .bg-brand-50 { background-color: #efeaff; }
  .text-brand-600 { color: #6b5ce7; }

  
  /* ═══ CARD REFINEMENTS — Fidelidade ao Print ═══ */
  .gig-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  
  .gig-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(139, 124, 255, 0.15);
  }
  
  .gig-thumb {
    position: relative;
    width: 100%;
    padding-bottom: 53%;
    background: #f1f5f9;
    border: 1px solid #e5e7eb;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  .gig-thumb > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .gig-card:hover .gig-thumb {
    border-color: #c7c0ff;
    box-shadow: 0 8px 20px rgba(139, 124, 255, 0.12);
  }
  
  .gig-card .gig-img {
    transition: transform 0.4s ease;
  }
  
  .gig-card:hover .gig-img {
    transform: scale(1.06);
  }
  
  .gig-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 36px;
    word-break: break-word;
  }
  
  /* Badge styling */
  .gig-card .badge {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 6px;
  }
  
  /* Carrossel de imagens */
  .gig-carousel-arrow {
    transition: opacity 0.2s ease, background-color 0.2s ease;
  }
  
  .gig-carousel-dots {
    transition: opacity 0.2s ease;
  }
  
  /* Dark mode */
  html.dark .gig-thumb {
    background: var(--surf-800);
    border-color: rgba(255, 255, 255, 0.08);
  }
  
  html.dark .gig-card:hover .gig-thumb {
    border-color: rgba(139, 124, 255, 0.4);
  }


  /* ============ PROFILE PAGE (origin design) ============ */
  /* btn-primary / btn-outline (used inside profile page) */
  .btn-primary{background:var(--primary);color:#fff;transition:background .15s}
  .btn-primary:hover{background:var(--primary-600)}
  .btn-outline{border:1px solid #e2e8f0;color:#0f172a;background:#fff;transition:all .15s}
  .btn-outline:hover{border-color:#c7c0ff;color:var(--primary-text)}
  /* tab / tab-active (profile tabs) */
  .tab{border-bottom:2px solid transparent;color:#64748b;transition:all .15s;padding-bottom:.5rem;font-size:14px;background:none;cursor:pointer}
  .tab:hover{color:#0f172a}
  .tab-active{color:#0f172a;border-color:var(--primary);font-weight:700}
  /* star-row (used in profile head and reviews) */
  .star-row i{color:var(--warning)}
  
  .cover { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-bottom: 1px solid #e2e8f0; }

  .card-gig{transition:transform .2s, box-shadow .2s, border-color .2s;border:1px solid #e5e7eb}
  .card-gig:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(91,78,224,.18);border-color:#c7c0ff}
  .card-gig .gig-img{transition:transform .4s}
  .card-gig:hover .gig-img{transform:scale(1.06)}
  .lvl-bar{height:6px;background:#f1f5f9;border-radius:9999px;overflow:hidden}
  .lvl-fill{height:100%;background:#8b7cff;border-radius:9999px}
  .badge-verified{background:#dcfce7;color:#15803d}
  .badge-top{background:#fef3c7;color:#b45309}
  html.dark .cover{background:linear-gradient(120deg,rgba(91,78,224,.25) 0%,rgba(60,50,180,.2) 40%,rgba(40,30,140,.15) 100%)}
  html.dark .card-gig{border-color:rgba(255,255,255,.07)}
  html.dark .card-gig:hover{border-color:rgba(139,124,255,.4)}
  html.dark .lvl-bar{background:var(--surf-700)}
  html.dark .badge-verified{background:rgba(16,185,129,.15);color:#34d399}
  html.dark .badge-top{background:rgba(245,158,11,.12);color:#fbbf24}

  :root {
    --primary: #8b7cff;
    --primary-600: #7a6bf0;
    --primary-soft: #efeaff;
    --primary-text: #5b4ee0;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e5e7eb;
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --warning: #f59e0b;
  }
  html, body { 
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important; 
    color: var(--ink) !important; 
    background: #fff !important; 
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
  }
  .max-w-6xl { max-width: 80rem !important; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
  @media (min-width: 640px) { .max-w-6xl { padding-left: 1.5rem; padding-right: 1.5rem; } }
  
  .btn-primary, .btn-primary-alt { 
    background: var(--primary) !important; 
    color: #fff !important; 
    border-radius: 0.5rem !important; 
    font-weight: 700 !important; 
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
  }
  .btn-primary:hover { background: var(--primary-600) !important; transform: translateY(-1px); }
  
  .btn-outline, .btn-outline-alt { 
    border: 1px solid #e2e8f0 !important; 
    background: #fff !important; 
    border-radius: 0.5rem !important; 
    font-weight: 700 !important;
    transition: all 0.2s;
    padding: 0.5rem 1rem;
  }
  
  .card, .card-alt, .gig-card {
    border-radius: 0.75rem !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #fff;
  }
  .card:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1) !important; }

  .hero-title { font-size: 2.5rem; line-height: 1.2; font-weight: 800; color: #0f172a; }
  @media (max-width: 640px) { .hero-title { font-size: 1.75rem; } }
  
  /* Garantir que o grid seja responsivo */
  .grid-gigs {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
  }
  @media (min-width: 640px) { .grid-gigs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .grid-gigs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  *{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:'Inter',sans-serif;background:#f1f5f9;padding:24px;}
  @media print{body{background:#fff;padding:0;}@page{margin:1cm;}}

  /* ============ AVATAR UPLOAD ============ */
  .avatar-circle {
    width: 80px; height: 80px; border-radius: 50%;
    overflow: hidden; border: 2px solid #e2e8f0;
    background: #f1f5f9; cursor: pointer; position: relative;
    flex-shrink: 0;
  }
  .avatar-circle:hover { border-color: #1a73e8; }
  .avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
  .avatar-circle .avatar-letter {
    width: 100%; height: 100%; display: grid; place-items: center;
    font-size: 28px; font-weight: 800; color: white;
    background: linear-gradient(135deg,#1a73e8,#7C3AED);
  }
  .avatar-circle .avatar-camera {
    position: absolute; inset: 0; background: rgba(0,0,0,.5);
    display: grid; place-items: center; opacity: 0; transition: opacity .2s;
  }
  .avatar-circle:hover .avatar-camera { opacity: 1; }
  .avatar-camera i { color: white; width: 20px; height: 20px; }
  .avatar-option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 12px;
    border: 2px solid #e2e8f0; cursor: pointer; background: #fff;
  }
  .avatar-option:hover { border-color: #cbd5e1; }
  .avatar-option.on { border-color: #1a73e8; background: #eef5ff; }
  .avatar-option .dot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #cbd5e1; flex-shrink: 0;
  }
  .avatar-option.on .dot { border-color: #1a73e8; background: #1a73e8; }
  html.dark .avatar-circle { border-color: rgba(255,255,255,.15); }
  html.dark .avatar-option { background: var(--surf-800); border-color: rgba(255,255,255,.1); }
  html.dark .avatar-option.on { border-color: var(--neon-cyan); background: rgba(34,211,238,.08); }

/* ══════════════════════════════════════════════════════════
   GIG CARD CAROUSEL — setas e dots (Item 3)
   ══════════════════════════════════════════════════════════ */

.gig-thumb {
  position: relative !important;
  width: 100%;
  aspect-ratio: 4/3;
  padding-bottom: 0 !important;
  overflow: hidden;
  border-radius: 12px;
  background: #f1f5f9;
}

.gig-thumb img[data-slide] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.gig-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.gig-carousel-arrow:hover {
  background: #ffffff;
}

.gig-carousel-prev { left: 8px; }
.gig-carousel-next { right: 8px; }

.gig-carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.gig-carousel-dots span[data-dot] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.gig-carousel-dots span[data-dot].bg-white {
  background: #ffffff;
  transform: scale(1.3);
}

/* Mostrar no hover do card */
.gig-card:hover .gig-carousel-arrow,
.gig-card:hover .gig-carousel-dots {
  opacity: 1;
}

/* Mobile — sempre visível */
@media (max-width: 640px) {
  .gig-carousel-arrow {
    opacity: 1 !important;
    width: 24px;
    height: 24px;
  }
  .gig-carousel-dots {
    opacity: 1 !important;
  }
}

html.dark .gig-carousel-arrow {
  background: rgba(30,41,59,0.92);
}
html.dark .gig-carousel-arrow:hover {
  background: #1e293b;
}

/* ══ PROFILE DROPDOWN ══ */
#profile-dropdown {
  animation: fade .15s ease-out;
}

/* Avatar tamanho correto no perfil */
#profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}