/* Fonts for the category styles (brand menu → Style). Only the @font-face
   rules load up front; a font file is fetched once a style actually uses it. */

:root{
  /* clean white background + one vivid saturated green accent */
  --bg:#FFFFFF; --bg-alt:#F0FDF4; --surface:#ffffff;
  --ink:#0F172A; --ink-soft:#64748B;
  --border:#E2E8F0;
  --accent:#16A34A; --accent-dark:#15803D; --accent-soft:#DCFCE7;
  --teal:#15803D; --teal-soft:#DCFCE7;
  --price-bg:#DCFCE7; --price-ink:#15803D;
  --violet:#166534; --violet-soft:#DCFCE7;
  --font-display:'Noto Sans Georgian', Arial, sans-serif;
  --font-body:'Noto Sans Georgian', Arial, sans-serif;
}

:root[data-theme="dark"]{
  --bg:#121212; --bg-alt:#1c1c1c; --surface:#1a1a1a;
  --ink:#ededed; --ink-soft:#9a9a9a;
  --border:#2e2e2e;
  --accent:#3e6b31; --accent-dark:#56934a; --accent-soft:#1c2a17;
  --teal:#4fd1c5; --teal-soft:#12211f;
  --price-bg:#2a2013; --price-ink:#e8b93f;
  --violet:#c77dff; --violet-soft:#241220;
}

/* Cross-document page-transition animation (native View Transitions API).
   Chromium navigates between pages with a soft crossfade instead of the
   usual hard cut; browsers that don't support it just ignore the rule and
   fall back to normal navigation, so this is pure progressive enhancement.
   Skipped under reduced-motion since the browser doesn't do that for us. */
@media not (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: auto;
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink); overflow-x:hidden;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-dark);}
button{font-family:var(--font-body); cursor:pointer;}
img,svg{display:block;}

.wrap{width:100%; max-width:1440px; margin:0 auto; display:flex; flex-direction:column;}

/* ---------- header ---------- */
/* The bar itself spans the full viewport width (no max-width) so its
   border/background/shadow reach both edges on screens wider than the
   1440px content column; .site-header-inner is what actually gets that
   1440px cap + 64px side padding, same as .wrap/.section elsewhere, so the
   logo/nav/account content still lines up with the rest of the page. */
.site-header{
  /* 9999, not a value tuned to any one PayPal iframe: their card form
     injects several overlapping elements (component-frame, popup menus,
     etc.) at various z-indexes up to 300 that we don't control, so the
     header needs a comfortable margin above all of them. */
  border-bottom:1.5px solid var(--border); position:sticky; top:0; z-index:9999; background:var(--bg);
  transition:box-shadow .25s ease;
}
.site-header-inner{
  /* Three columns: logo + nav | services/jobs switch | utilities. The two
     equal 1fr sides keep the middle pill centred on the page; their
     max-content minimum means that near the 1200px breakpoint, where one
     side no longer fits in half the row, the pill shifts over a little
     instead of the utilities wrapping onto a second line or overlapping. */
  display:grid; grid-template-columns:minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items:center; column-gap:24px; padding:22px 64px;
  max-width:1440px; margin:0 auto;
}
.site-header-inner > .mode-switch-mini{ grid-column:2; justify-self:center; }
/* Pinned explicitly: below 1200px the switch is display:none and drops out
   of the grid, which would otherwise let header-right slide into column 2. */
.site-header-inner > .header-left{ grid-column:1; }
.site-header-inner > .header-right{ grid-column:3; }
.site-header.scrolled{ box-shadow:0 8px 24px -18px oklch(30% 0.03 55 / 0.4); }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-name{ font-size:21px; font-weight:800; color:var(--ink); letter-spacing:-.3px; }

/* Brand menu: hovering the logo or the "Kits" name opens a Windows 11
   style context menu (colors / background / animations), each row
   cascading a submenu out to the right. The logo itself stays still. */
.brand-wrap{ position:relative; }
.brand-mark .brand-accent{ stroke:var(--accent); transition:stroke .3s ease; }
@media (prefers-reduced-motion: reduce){
}

.header-left{ display:flex; align-items:center; gap:52px; }
.main-nav{ display:flex; align-items:center; gap:34px; }
.nav-link{ position:relative; color:var(--ink-soft); font-size:15px; font-weight:600; transition:color .15s; padding-bottom:2px; }
.nav-link::after{
  content:''; position:absolute; left:0; right:100%; bottom:-3px; height:2px; background:var(--accent);
  transition:right .22s ease;
}
.nav-link:hover, .nav-link.active{ color:var(--ink); }
.nav-link:hover::after, .nav-link.active::after{ right:0; }

.header-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; row-gap:8px; position:relative; justify-self:end; }
/* button.mobile-nav-btn (not just .mobile-nav-btn): needs to outrank the
   later, same-specificity .icon-btn{display:flex} rule below (this button
   also carries .icon-btn for its sizing/hover styling), otherwise cascade
   order alone made the hamburger permanently visible regardless of the
   1200px media query. */
button.mobile-nav-btn{ display:none; }
/* The hamburger is the one thing still visible in the collapsed mobile
   header once main-nav/header-utils move into the drawer below 1200px —
   including the bell that would otherwise show an unread badge. Mirroring
   that badge here is what lets a message actually get noticed on a phone
   without having to open the drawer first. */
.mobile-nav-btn .nav-badge{ position:absolute; top:2px; right:2px; margin-left:0; min-width:16px; height:16px; font-size:10px; }
.header-utils{ display:flex; align-items:center; gap:10px; }
.header-utils .icon-btn{ padding:12px 15px; flex-shrink:0; }
.header-utils .icon-btn svg{ width:24px; height:24px; flex-shrink:0; }
.header-utils .nav-badge{ min-width:18px; height:18px; font-size:11px; }
/* Scoped to the real header (not its drawer copy, where .site-nav-drawer-body
   .nav-badge below intentionally keeps it inline at the end of the row) —
   inline placement here pushed the bell icon itself off-center the moment
   an unread badge appeared, since the button centers icon+badge as a group. */
.site-header .header-utils .nav-badge{ position:absolute; top:4px; right:2px; margin-left:0; }
.drawer-label{ display:none; }

/* Below this the logo + full nav + mode switch + utility icons + account
   name no longer all fit on one row (site-header keeps its 64px side
   padding down to 680px) — collapse into the hamburger drawer earlier
   instead of letting header-right wrap onto a second line. */
@media (max-width: 1200px){
  .header-left{ gap:10px; }
  /* !important: .mode-switch-mini shares specificity with the later,
     unconditional .mode-switch{display:flex} rule, which would otherwise
     win by source order and keep this pill visible past the breakpoint. */
  .main-nav, .mode-switch-mini{ display:none !important; }
  button.mobile-nav-btn{ display:flex; }
  .header-right{ gap:8px; }
  .account-name{ display:none; }
}

.btn-primary{
  background:var(--accent); color:oklch(99% 0.005 75); border:none; border-radius:10px; padding:13px 26px;
  font-weight:700; font-size:15px; transition:background .15s, transform .15s, box-shadow .2s;
}
.btn-primary:hover{ background:var(--accent-dark); color:oklch(99% 0.005 75); transform:translateY(-1px); box-shadow:0 10px 20px -10px rgba(98,114,84,.4); }
.btn-primary:active{ transform:translateY(0) scale(.97); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-ghost{
  background:transparent; border:1.5px solid var(--border); color:var(--ink); border-radius:10px; padding:12.5px 22px;
  font-weight:600; font-size:15px; transition:border-color .15s, background .15s;
}
.btn-ghost:hover{ border-color:var(--ink-soft); background:var(--bg-alt); }

.lang-btn{
  display:flex; align-items:center; gap:7px; background:transparent; border:1.5px solid var(--border); border-radius:10px;
  padding:9px 14px; font-size:14px; font-weight:700; color:var(--ink); transition:border-color .15s;
}
.lang-btn:hover{ border-color:var(--ink-soft); }
.lang-btn svg{ transition:transform .2s ease; }
.lang-btn.open svg{ transform:rotate(180deg); }

.lang-menu{
  position:absolute; top:48px; right:0; background:var(--surface); border:1.5px solid var(--border); border-radius:12px;
  padding:6px; box-shadow:0 16px 32px -12px oklch(30% 0.03 55 / .35); min-width:150px; max-width:calc(100vw - 40px); z-index:40;
  transform-origin:top right; transform:scale(.92) translateY(-6px); opacity:0; pointer-events:none;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), opacity .14s ease;
}
.lang-menu.open{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }
.lang-item{
  display:block; width:100%; text-align:left; border:none; background:none; font-family:inherit;
  padding:10px 16px; font-size:14px; font-weight:600; color:var(--ink); border-radius:8px; cursor:pointer; transition:background .12s;
}
.lang-item:hover{ background:var(--bg-alt); }
.lang-item.active{ color:var(--accent); background:var(--accent-soft); }

.theme-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:none; font-family:inherit;
  padding:9px 12px; font-size:13.5px; font-weight:600; color:var(--ink); border-radius:8px; cursor:pointer; transition:background .12s;
}
.theme-item:hover{ background:var(--bg-alt); }
.theme-swatch{ width:16px; height:16px; border-radius:50%; flex-shrink:0; border:1.5px solid rgba(0,0,0,.08); }

.icon-btn{ padding:9px 12px; position:relative; }

/* ---------- account menu ---------- */
.account-btn{
  display:flex; align-items:center; gap:9px; background:transparent; border:1.5px solid var(--border); border-radius:999px;
  padding:6px 14px 6px 7px; transition:border-color .15s, background .15s;
}
.account-btn:hover{ border-color:var(--ink-soft); background:var(--bg-alt); }
.account-btn svg{ color:var(--ink-soft); transition:transform .2s ease; }
.account-btn.open svg{ transform:rotate(180deg); }
.account-name{ font-size:14.5px; font-weight:700; color:var(--ink); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hidden-menu-divider{ height:1.5px; background:var(--border); margin:8px 4px; }

/* ---------- messages sidebar ---------- */
.msg-sidebar-overlay{
  /* Above .site-header (9999) so the header is dimmed too. */
  position:fixed; inset:0; background:oklch(20% 0.02 55 / .35); z-index:10000; opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.msg-sidebar-overlay.open{ opacity:1; pointer-events:auto; }
.msg-sidebar{
  position:fixed; top:0; right:0; bottom:0; width:480px; max-width:100vw; background:var(--surface);
  border-left:1.5px solid var(--border); box-shadow:-16px 0 40px -20px oklch(30% 0.03 55 / .4); z-index:10001;
  display:flex; flex-direction:column; overflow-x:hidden; transform:translateX(100%); transition:transform .28s cubic-bezier(.34,1.1,.64,1);
}
.msg-sidebar.open{ transform:translateX(0); }
.msg-sidebar-head{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1.5px solid var(--border); flex-shrink:0; }
.msg-sidebar-title{ font-weight:700; font-size:16px; color:var(--ink); }
.msg-sidebar-icon-btn{
  width:32px; height:32px; border-radius:9px; border:none; background:transparent; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; transition:background .12s, color .12s; flex-shrink:0;
}
.msg-sidebar-icon-btn:hover{ background:var(--bg-alt); color:var(--ink); }
.msg-sidebar-body{ flex:1; overflow-y:auto; overflow-x:hidden; min-height:0; min-width:0; }

.sidebar-inbox-list{ display:flex; flex-direction:column; gap:2px; padding:10px; min-width:0; }
.sidebar-inbox-row{
  width:100%; min-width:0; border:1.5px solid transparent; background:none; font-family:inherit; text-align:left; cursor:pointer;
}
.msg-sidebar .inbox-preview{ max-width:none; }
.msg-sidebar .inbox-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-sidebar .inbox-row > div:not(.avatar){ min-width:0; }

.msg-sidebar .chat-wrap.sidebar-chat{ max-width:none; margin:0; padding:0; height:100%; width:100%; }
.msg-sidebar .sidebar-chat .chat-head{ padding:14px 16px; }
.msg-sidebar .sidebar-chat .chat-messages{ padding:16px; }
.msg-sidebar .sidebar-chat .chat-form{ padding:12px 16px 16px 16px; }

@media (max-width: 520px){
  .msg-sidebar{ width:100%; }
}

/* ---------- support chat bubble ---------- */
.support-bubble{
  position:fixed; right:22px; bottom:22px; width:56px; height:56px; border-radius:50%;
  background:var(--accent); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px -10px oklch(30% 0.03 55 / .5); z-index:48; cursor:pointer; transition:transform .15s;
}
.support-bubble:hover{ transform:scale(1.06); }
.support-panel{
  position:fixed; right:22px; bottom:90px; width:360px; max-width:calc(100vw - 32px); height:520px; max-height:calc(100vh - 130px);
  background:var(--surface); border:1.5px solid var(--border); border-radius:16px; box-shadow:0 24px 60px -20px oklch(30% 0.03 55 / .5);
  z-index:48; display:none; flex-direction:column; overflow:hidden;
}
.support-panel.open{ display:flex; }
.support-panel-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1.5px solid var(--border); flex-shrink:0; }
.support-panel-title{ font-weight:700; font-size:15px; color:var(--ink); }
.support-panel-body{ flex:1; overflow-y:auto; overflow-x:hidden; min-height:0; min-width:0; }
.support-panel .chat-wrap.sidebar-chat{ max-width:none; margin:0; padding:0; height:100%; width:100%; }
.support-panel .sidebar-chat .chat-head{ padding:12px 14px; }
.support-panel .sidebar-chat .chat-messages{ padding:14px; }
.support-panel .sidebar-chat .chat-form{ padding:10px 14px 14px 14px; }
.support-faq-row{ display:flex; flex-direction:column; gap:6px; padding:10px 14px; border-top:1.5px solid var(--border); flex-shrink:0; }
.support-faq-btn{
  text-align:left; font-size:12.5px; padding:8px 10px; border-radius:8px; border:1.5px solid var(--border);
  background:var(--bg-alt); color:var(--ink-soft); cursor:pointer; transition:background .12s, color .12s;
}
.support-faq-btn:hover{ background:var(--accent-soft); color:var(--ink); }

@media (max-width: 520px){
  .support-panel{ right:16px; left:16px; width:auto; bottom:86px; }
  .support-bubble{ right:16px; bottom:16px; }
}

/* ---------- hero ---------- */
.hero{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px;
  padding:64px 64px 48px 64px; max-width:760px; margin:0 auto;
}
.hero-copy{ display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; }
.eyebrow{
  display:inline-flex; align-self:center; background:var(--accent-soft); color:var(--accent-dark); font-weight:700;
  font-size:13.5px; padding:7px 14px; border-radius:999px; letter-spacing:.2px;
}
.hero-title{ font-family:var(--font-display); font-size:38px; line-height:1.22; font-weight:800; color:var(--ink); margin:0; max-width:560px; }
.hero-desc{ font-size:16px; line-height:1.6; color:var(--ink-soft); margin:0; max-width:460px; }

.search-bar{
  position:relative; margin-top:6px; display:flex; align-items:center; background:var(--surface); border:1.5px solid var(--border);
  border-radius:16px; padding:7px; box-shadow:0 12px 28px -16px oklch(30% 0.03 55 / .18); width:100%; max-width:620px;
  transition:border-color .18s, box-shadow .18s;
}
.search-bar:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), 0 12px 28px -16px oklch(30% 0.03 55 / .22); }
.search-bar svg{ margin:0 12px 0 12px; flex-shrink:0; }
.search-bar input{
  flex:1; border:none; outline:none; background:transparent; font-size:15.5px; color:var(--ink); font-family:var(--font-body);
}
.search-bar input::placeholder{ color:var(--ink-soft); }
.search-btn{
  background:var(--accent); color:white; border:none; border-radius:12px; padding:0 30px; font-weight:700; font-size:15px;
  height:58px; transition:background .15s, transform .12s;
}
.search-btn:hover{ background:var(--accent-dark); }
.search-btn:active{ transform:scale(.96); }

.search-suggest-menu{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--surface); border:1.5px solid var(--border);
  border-radius:14px; padding:6px; box-shadow:0 16px 32px -12px oklch(30% 0.03 55 / .3); z-index:40;
  max-height:360px; overflow-y:auto; display:none; text-align:left;
}
.search-suggest-menu.open{ display:block; }
.search-suggest-row{
  display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; color:inherit; transition:background .12s;
}
.search-suggest-row:hover, .search-suggest-row.active{ background:var(--bg-alt); }
.search-suggest-icon{
  width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
}
.search-suggest-avatar{ width:34px; height:34px; font-size:13px; flex-shrink:0; }
.search-suggest-info{ display:flex; flex-direction:column; min-width:0; }
.search-suggest-title{ font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-suggest-subtitle{ font-size:12px; color:var(--ink-soft); }
.search-suggest-empty{ padding:14px; text-align:center; color:var(--ink-soft); font-size:13.5px; }

.hero-quicklinks{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
.hero-quicklink{
  font-size:13.5px; color:var(--ink-soft); background:var(--surface); border:1.5px solid var(--border); border-radius:999px;
  padding:7px 15px; font-weight:600; transition:border-color .15s, color .15s;
}
.hero-quicklink:hover{ border-color:var(--accent); color:var(--accent); }

.chip{
  background:var(--surface); border:1.5px solid var(--border); border-radius:999px; padding:9px 16px; font-size:13.5px;
  font-weight:600; color:var(--ink-soft); transition:all .15s; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
}
.chip:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); transform:translateY(-2px); }
.chip.active{ background:var(--ink); color:var(--surface); border-color:var(--ink); }
.chip-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:2px; }

.nav-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--accent); color:white; font-size:10.5px; font-weight:700; line-height:1;
  margin-left:5px; vertical-align:2px;
}
.nav-badge[hidden]{ display:none; }
.favorite-btn{
  width:38px; height:38px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color .15s, background .15s;
}
.favorite-btn:hover{ border-color:var(--accent); }
.favorite-btn.active{ background:var(--accent-soft); border-color:var(--accent); }
.favorite-btn svg{ transition:fill .15s, stroke .15s; }

/* ---------- rating widget ---------- */
.rating-section{ margin-top:36px; padding-top:32px; border-top:1.5px solid var(--border); }
.star-input{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:3px; }
.star-input input{ position:absolute; opacity:0; width:0; height:0; }
.star-input label{ font-size:30px; line-height:1; color:var(--border); cursor:pointer; transition:color .12s; }
.star-input input:checked ~ label{ color:var(--price-ink); }
.star-input label:hover, .star-input label:hover ~ label{ color:var(--price-ink); }
.rating-stars-static{ color:var(--price-ink); font-size:14px; letter-spacing:1px; }
.review-card{ background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:18px; }
.review-card + .review-card{ margin-top:12px; }

/* ---------- stats ---------- */
.stats{
  display:flex; justify-content:center; padding:36px 64px; border-top:1.5px solid var(--border); border-bottom:1.5px solid var(--border);
  background:var(--surface);
}
.stats-inner{ display:flex; align-items:center; gap:0; max-width:900px; width:100%; justify-content:space-between; }
.stat{ text-align:center; flex:1; }
.stat-num{ font-family:var(--font-display); font-size:30px; font-weight:600; color:var(--ink); }
.stat-label{ font-size:14px; color:var(--ink-soft); margin-top:4px; }
.stat-div{ width:1.5px; height:44px; background:var(--border); }

/* ---------- sections / reveal ---------- */
.section{ padding:64px 64px 20px 64px; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px; }
.section-title{ font-family:var(--font-display); font-size:29px; font-weight:600; color:var(--ink); margin:0; }
.section-link{ font-size:14.5px; }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-child{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible .reveal-child{ opacity:1; transform:translateY(0); }
.reveal.is-visible .reveal-child:nth-child(1){ transition-delay:.03s; }
.reveal.is-visible .reveal-child:nth-child(2){ transition-delay:.09s; }
.reveal.is-visible .reveal-child:nth-child(3){ transition-delay:.15s; }
.reveal.is-visible .reveal-child:nth-child(4){ transition-delay:.21s; }
.reveal.is-visible .reveal-child:nth-child(5){ transition-delay:.27s; }
.reveal.is-visible .reveal-child:nth-child(6){ transition-delay:.33s; }
.reveal.is-visible .reveal-child:nth-child(7){ transition-delay:.39s; }
.reveal.is-visible .reveal-child:nth-child(8){ transition-delay:.45s; }
.reveal.is-visible .reveal-child:nth-child(9){ transition-delay:.51s; }
.reveal.is-visible .reveal-child:nth-child(10){ transition-delay:.57s; }
.reveal.is-visible .reveal-child:nth-child(11){ transition-delay:.63s; }
.reveal.is-visible .reveal-child:nth-child(12){ transition-delay:.69s; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-child{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- category grid ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.cat-card{
  padding:24px 20px; display:flex; flex-direction:column; gap:14px; background:var(--surface); border:1.5px solid var(--border);
  border-radius:16px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover{ transform:translateY(-5px); box-shadow:0 16px 28px -14px oklch(30% 0.03 55 / .3); border-color:var(--accent); }
.cat-icon{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.cat-card:hover .cat-icon{ transform:scale(1.1) rotate(-6deg); }
.cat-title{ font-size:16px; font-weight:700; color:var(--ink); }
.cat-count{ font-size:13.5px; color:var(--ink-soft); margin-top:3px; }
.cat-card-all{
  align-items:flex-start; justify-content:center; gap:8px; background:var(--bg-alt); border-style:dashed;
}

/* ---------- service cards ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; }
.svc-grid.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.svc-card{
  background:var(--surface); border:1.5px solid var(--border); border-radius:18px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:0 20px 34px -16px oklch(30% 0.03 55 / .32); }
.job-card{ border-color:var(--teal); border-width:1.5px; box-shadow:0 0 0 1px var(--teal) inset; }

/* ---------- job listing (vacancies) ---------- */
.job-list{ display:flex; flex-direction:column; gap:18px; }
.job-card{
  position:relative; display:block; background:var(--surface); border:1.5px solid var(--border); border-radius:16px; padding:24px;
  transition:transform .15s, box-shadow .15s, border-color .15s; color:inherit; box-shadow:none;
}
.job-card:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -16px oklch(30% 0.03 55 / 0.25); border-color:var(--teal); }
.job-card-link-overlay{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.job-card-title{ font-size:17px; font-weight:700; color:var(--ink); margin:0; }
.job-card-time{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
.job-price-badge{ background:var(--price-bg); color:var(--price-ink); font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:7px; white-space:nowrap; }
.job-price-badge.hourly{ background:var(--teal-soft); color:var(--teal); }
.job-card-desc{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:12px 0; }
.job-tag{ background:var(--bg-alt); border:1.5px solid var(--border); border-radius:8px; padding:5px 11px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.job-card-foot{ display:flex; align-items:center; gap:10px; padding-top:14px; border-top:1.5px solid var(--border); font-size:13px; color:var(--ink-soft); flex-wrap:wrap; }
.job-card-foot .seller-name{ color:var(--ink); font-weight:700; }
.job-mini{ background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:16px; display:block; color:inherit; transition:border-color .15s; }
.job-mini:hover{ border-color:var(--teal); }
.file-row{ display:flex; align-items:center; gap:10px; padding:11px 14px; border:1.5px solid var(--border); border-radius:11px; background:var(--surface); }
.field-label{ font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:8px; display:block; }
.svc-thumb{ height:150px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.svc-thumb svg{ transition:transform .3s ease; }
.svc-card:hover .svc-thumb svg{ transform:scale(1.15) rotate(4deg); }
.svc-thumb::after{
  content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 40%, oklch(100% 0 0 / .18) 50%, transparent 60%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.svc-card:hover .svc-thumb::after{ transform:translateX(120%); }
.svc-tag{ position:absolute; top:12px; left:12px; background:oklch(99% 0.005 75 / .92); color:oklch(23% 0.02 55); font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:7px; }
.svc-price{ position:absolute; top:12px; right:12px; background:var(--price-bg); color:var(--price-ink); font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:7px; }
.svc-body{ padding:16px; }
.svc-title{ font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4; min-height:40px; }
.svc-seller{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.avatar{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.seller-name{ font-size:13px; color:var(--ink-soft); font-weight:600; }
.svc-rating{ margin-left:auto; font-size:12.5px; color:var(--price-ink); font-weight:700; }

.grad-accent{ background:linear-gradient(135deg, #22C55E, #15803D); }
.grad-teal{ background:linear-gradient(135deg, #14B8A6, #0D9488); }
.grad-price{ background:linear-gradient(135deg, #84CC16, #4D7C0F); }
.grad-violet{ background:linear-gradient(135deg, #10B981, #047857); }

:root[data-theme="dark"] .grad-accent{ background:linear-gradient(135deg, #76885b, #627254); }
:root[data-theme="dark"] .grad-teal{ background:linear-gradient(135deg, #cfcfcf, #a3a3a3); }
:root[data-theme="dark"] .grad-price{ background:linear-gradient(135deg, #a9b795, #76885b); }
:root[data-theme="dark"] .grad-violet{ background:linear-gradient(135deg, #9a9a9a, #6b6b6b); }

.icon-bg-accent{ background:var(--accent-soft); } .icon-stroke-accent{ color:var(--accent-dark); }
.icon-bg-teal{ background:var(--teal-soft); } .icon-stroke-teal{ color:var(--teal); }
.icon-bg-price{ background:var(--price-bg); } .icon-stroke-price{ color:var(--price-ink); }
.icon-bg-violet{ background:var(--violet-soft); } .icon-stroke-violet{ color:var(--violet); }

.avatar-accent{ background:var(--accent-soft); color:var(--accent-dark); }
.avatar-teal{ background:var(--teal-soft); color:var(--teal); }
.avatar-price{ background:var(--price-bg); color:var(--price-ink); }
.avatar-violet{ background:var(--violet-soft); color:var(--violet); }

/* ---------- cta ---------- */
.cta{
  margin:56px 64px 64px 64px; background:linear-gradient(120deg, oklch(30% 0.03 55), oklch(24% 0.025 55)); border-radius:24px;
  padding:52px 56px; display:flex; align-items:center; justify-content:space-between; gap:32px; position:relative; overflow:hidden;
}
.cta::before{
  content:''; position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(118,136,91,.18);
  top:-140px; right:-80px; animation:blobPulse 8s ease-in-out infinite;
}
.cta-title{ font-family:var(--font-display); font-size:27px; font-weight:600; color:white; margin:0 0 10px 0; position:relative; }
.cta-text{ color:oklch(90% 0.01 75); font-size:15.5px; line-height:1.6; margin:0; max-width:520px; position:relative; }
.cta .btn-primary{ padding:15px 30px; font-size:15.5px; white-space:nowrap; position:relative; }
.cta-placeholder{
  background:var(--bg-alt); border:1.5px dashed var(--border); justify-content:flex-start; padding:36px 40px;
}
.cta-placeholder::before{ display:none; }
.cta-placeholder .cta-title{ color:var(--ink-soft); font-size:18px; font-weight:700; }
.cta-placeholder .cta-text{ color:var(--ink-soft); font-size:14px; }

/* ---------- footer ---------- */
.site-footer{
  border-top:1.5px solid var(--border); padding:52px 0 32px 0; background:var(--surface); margin-top:auto;
  width:100vw; position:relative; left:50%; margin-left:-50vw;
}
.footer-inner{ max-width:1440px; margin:0 auto; padding:0 64px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; }
.footer-h{ font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:12px; }
.foot-link{ color:var(--ink-soft); font-size:14.5px; font-weight:500; display:block; padding:5px 0; width:fit-content; }
.foot-link:hover{ color:var(--accent); transform:translateX(3px); }
.foot-link{ transition:color .15s, transform .15s; }
.foot-note{ margin:0 0 6px; max-width:240px; font-size:12.5px; line-height:1.45; color:var(--ink-soft); opacity:.85; }
/* .foot-link's own display:block (any author rule setting display does
   this) outranks the browser's default [hidden]{display:none} — same
   fix already applied to .nav-badge above for the same reason. Currently
   unused (the PWA install link stays visible unconditionally so it's
   always discoverable) but kept so a future hidden .foot-link isn't a
   silent trap again. */
.foot-link[hidden]{ display:none; }
.pwa-hint{
  position:absolute; top:100%; left:0; margin-top:8px; background:var(--surface); border:1.5px solid var(--border);
  border-radius:12px; padding:12px 14px; box-shadow:0 16px 32px -12px oklch(30% 0.03 55 / .35);
  width:240px; font-size:13px; line-height:1.5; color:var(--ink-soft); z-index:40;
}
.pwa-hint[hidden]{ display:none; }
.footer-bottom{ border-top:1.5px solid var(--border); padding-top:22px; display:flex; justify-content:space-between; align-items:center; }
.social-dot{ width:32px; height:32px; border-radius:50%; border:1.5px solid var(--border); display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft); text-decoration:none; transition:border-color .15s, color .15s, transform .15s; }
.social-dot:hover{ border-color:var(--accent); color:#5865F2; transform:translateY(-2px); }

/* ---------- breadcrumb / page head ---------- */
.crumb{ font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; }
.crumb .sep{ margin:0 6px; }
.crumb .current{ color:var(--ink); font-weight:600; }
.page-head{ padding:28px 64px 0 64px; }
.page-head-row{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:8px; }
.page-title{ font-family:var(--font-display); font-size:34px; font-weight:600; color:var(--ink); margin:0 0 8px 0; }
.page-sub{ font-size:15px; color:var(--ink-soft); margin:0; }

.tab{ padding:10px 20px; border-radius:999px; font-size:14.5px; font-weight:700; border:1.5px solid var(--border); color:var(--ink-soft); background:var(--surface); transition:all .15s; }
.tab.active{ background:var(--ink); color:var(--surface); border-color:var(--ink); }

/* ---------- category detail sidebar / subtiles ---------- */
.cd-body{ display:flex; gap:36px; padding:28px 64px 64px 64px; align-items:flex-start; }
.cd-sidebar{ width:264px; flex-shrink:0; background:var(--surface); border:1.5px solid var(--border); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:2px; }
.top-item{ font-size:14.5px; color:var(--ink-soft); font-weight:600; padding:11px 14px; border-radius:10px; display:flex; align-items:center; gap:10px; transition:background .15s, color .15s, padding-left .15s; }
.top-item:hover{ background:var(--bg-alt); color:var(--ink); padding-left:18px; }
.top-item.active{ background:var(--accent-soft); color:var(--accent-dark); }
.sub-grid{ flex:1; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.sub-tile{
  background:var(--surface); border:1.5px solid var(--border); border-radius:16px; padding:26px 18px; display:flex;
  flex-direction:column; align-items:center; gap:14px; text-align:center; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sub-tile:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 16px 28px -14px oklch(30% 0.03 55 / .3); border-color:var(--accent); }
.sub-tile svg{ transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.sub-tile:hover svg{ transform:scale(1.15); }
.sub-tile-label{ font-size:14.5px; font-weight:600; color:var(--ink); }

/* ---------- listing sidebar / filters ---------- */
.lst-body{ display:flex; gap:36px; padding:12px 64px 56px 64px; align-items:flex-start; }
.lst-sidebar{ width:248px; flex-shrink:0; display:flex; flex-direction:column; gap:32px; }
.side-block{ border-top:1.5px solid var(--border); padding-top:24px; }
.side-block:first-child{ border-top:none; padding-top:0; }
.side-h{ font-size:13px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.4px; margin-bottom:14px; }
.cat-item{ font-size:14.5px; color:var(--ink-soft); font-weight:500; padding:8px 10px; border-radius:8px; display:block; transition:background .15s, color .15s; }
.cat-item:hover{ background:var(--bg-alt); color:var(--ink); }
.cat-item.active{ background:var(--accent-soft); color:var(--accent-dark); font-weight:700; }
.price-range{ display:flex; align-items:center; gap:10px; min-width:0; }
.price-input{
  flex:1; min-width:0; width:0; border:1.5px solid var(--border); border-radius:9px; padding:9px 12px; font-size:14px; color:var(--ink);
  background:var(--surface); font-family:var(--font-body); transition:border-color .15s;
}
.price-input:focus{ outline:none; border-color:var(--accent); }
.chk-row{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-soft); padding:5px 0; cursor:pointer; }
.chk-box{
  width:17px; height:17px; border-radius:5px; border:1.5px solid var(--border); flex-shrink:0; position:relative;
  transition:background .15s, border-color .15s;
}
.chk-box svg{ position:absolute; inset:0; margin:auto; opacity:0; transform:scale(.5); transition:opacity .12s, transform .15s; }
input:checked + .chk-row-label .chk-box, .chk-row input:checked ~ .chk-box{ background:var(--accent); border-color:var(--accent); }
.chk-input{ display:none; }
.chk-input:checked + .chk-box{ background:var(--accent); border-color:var(--accent); }
.chk-input:checked + .chk-box svg{ opacity:1; transform:scale(1); }
.apply-btn{ margin-top:6px; }

.toolbar{ display:flex; align-items:center; justify-content:space-between; padding:18px 64px; gap:16px; flex-wrap:wrap; }
.sort-select{
  appearance:none; -webkit-appearance:none; background:var(--surface); border:1.5px solid var(--border); border-radius:999px;
  padding:9px 34px 9px 16px; font-size:13.5px; font-weight:600; color:var(--ink-soft); font-family:var(--font-body);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2348443c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; cursor:pointer;
}

.pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:44px; }
.pg{
  width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px;
  font-weight:600; color:var(--ink-soft); border:1.5px solid var(--border); background:var(--surface); transition:all .15s;
}
.pg:hover{ border-color:var(--ink-soft); transform:translateY(-2px); }
.pg.active{ background:var(--ink); color:var(--surface); border-color:var(--ink); }
.pg.disabled{ opacity:.4; pointer-events:none; }
.pg-ellipsis{ color:var(--ink-soft); padding:0 4px; }

.empty-state{ text-align:center; padding:64px 20px; color:var(--ink-soft); font-size:15px; }

/* ---------- live (websocket) filtering ---------- */
.live-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--border); margin-left:6px; vertical-align:middle; transition:background .2s; }
.live-dot.connected{ background:var(--accent-success); box-shadow:0 0 0 0 color-mix(in oklch, var(--accent-success) 60%, transparent); animation:liveDotPulse 2s ease-out infinite; }
@keyframes liveDotPulse{
  0%{ box-shadow:0 0 0 0 oklch(58% 0.11 145 / .45); }
  70%{ box-shadow:0 0 0 6px oklch(58% 0.11 145 / 0); }
  100%{ box-shadow:0 0 0 0 oklch(58% 0.11 145 / 0); }
}
#results.swap-in{ animation:resultsSwap .32s ease; }
@keyframes resultsSwap{ 0%{ opacity:.25; transform:translateY(6px); } 100%{ opacity:1; transform:translateY(0); } }
.msg-seller-link{
  display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-size:12.5px; font-weight:700; color:var(--accent);
  transition:color .15s, gap .15s;
}
.msg-seller-link:hover{ color:var(--accent-dark); gap:8px; }

/* ---------- flash messages ---------- */
.flash-wrap{ max-width:900px; margin:20px auto 0 auto; padding:0 20px; display:flex; flex-direction:column; gap:10px; }
.flash{
  padding:12px 16px; border-radius:10px; font-size:14px; font-weight:600; animation:authIn .3s ease;
  opacity:1; max-height:60px; overflow:hidden; transition:opacity .3s ease, transform .3s ease, max-height .3s ease .1s, padding .3s ease .1s;
}
.flash-success{ background:oklch(94% 0.06 145); color:oklch(30% 0.08 145); }
.flash-error{ background:var(--om-bg-error-tint, oklch(90% 0.05 25)); color:var(--accent-error, #a63244); }
.flash-info, .flash-warning{ background:var(--accent-soft); color:var(--accent-dark); }
.flash-out{ opacity:0; transform:translateY(-6px); max-height:0; padding-top:0; padding-bottom:0; }

/* ---------- profile ---------- */
/* Same side padding as .section/.page-head (both already match the header's
   own 64px inset) — was its own narrower max-width:1120px + 20px padding
   before, which made the profile page's content visibly indent inward from
   where the header's logo/account button actually sit. */
.profile-wrap{ padding:0 64px 80px 64px; }
.profile-cover{
  width:100vw; position:relative; left:50%; margin-left:-50vw; height:150px;
  background:linear-gradient(120deg, var(--accent), var(--teal));
}
.profile-head{ display:flex; align-items:center; gap:18px; margin-bottom:36px; }
.profile-avatar{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; }
.profile-name{ font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--ink); }
.profile-email{ font-size:14px; color:var(--ink-soft); margin-top:2px; }
.profile-badge{ display:inline-flex; margin-top:8px; background:var(--accent-soft); color:var(--accent-dark); font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
.profile-badge.top{ background:var(--price-bg); color:var(--price-ink); }
.profile-badge.company{ background:var(--violet-soft); color:var(--violet); }
.profile-badge.trust-junior{ background:var(--border); color:var(--ink-soft); }
.profile-badge.trust-experienced{ background:var(--teal-soft); color:var(--teal); }
.profile-badge.trust-trusted{ background:var(--price-bg); color:var(--price-ink); }
.profile-stat-card{ display:flex; background:var(--surface); border:1.5px solid var(--border); border-radius:16px; margin-bottom:36px; flex-wrap:wrap; }
.profile-stat-card .stat{ padding:18px 0; }
.profile-stat-card .stat-num{ font-size:22px; }

/* ---------- profile hero (cover-banner redesign) ---------- */
.profile-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; position:relative; z-index:1; }
.profile-hero-left{ display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.profile-hero-avatar{
  width:132px; height:132px; border-radius:50%; border:5px solid var(--bg); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:700;
  margin-top:-52px;
}
.profile-hero-name-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.profile-hero-name{ font-family:var(--font-display); font-size:27px; font-weight:600; color:var(--ink); margin:0; }
.profile-tagline{ font-size:15px; color:var(--ink-soft); margin:6px 0 0 0; }
.profile-hero-actions{ display:flex; gap:12px; padding-bottom:8px; flex-wrap:wrap; }
.profile-body{ display:flex; gap:40px; align-items:flex-start; padding-bottom:64px; }
.profile-body.reveal.is-visible{ padding-bottom:64px; }
.profile-main{ flex:1; min-width:0; }
.profile-aside{ width:300px; flex-shrink:0; display:flex; flex-direction:column; gap:24px; }
.profile-aside-card{ background:var(--surface); border:1.5px solid var(--border); border-radius:16px; padding:22px; }
.profile-aside-title{ font-size:13px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.4px; margin-bottom:14px; }
.social-links-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.social-link-btn{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex-shrink:0;
  transition:border-color .15s, color .15s, background .15s, transform .15s;
}
.social-link-btn:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); transform:translateY(-2px); }
.profile-lang-row{ display:flex; justify-content:space-between; font-size:14px; padding:5px 0; }
.profile-lang-row span:first-child{ color:var(--ink); font-weight:600; }
.profile-lang-row span:last-child{ color:var(--ink-soft); }
.profile-cta{ background:linear-gradient(135deg, oklch(30% 0.03 55), oklch(24% 0.025 55)); border-radius:16px; padding:24px; text-align:center; }
.profile-cta-text{ color:white; font-weight:600; font-size:14.5px; margin-bottom:14px; }
.profile-cta .btn-primary{ width:100%; display:inline-flex; align-items:center; justify-content:center; }
.profile-about{ font-size:15px; color:var(--ink-soft); line-height:1.75; margin:0; max-width:640px; }
@media (max-width:880px){
  .profile-body{ flex-direction:column; }
  .profile-aside{ width:100%; flex-direction:row; flex-wrap:wrap; }
  .profile-aside-card{ flex:1; min-width:220px; }
}
.mode-switch{ display:flex; gap:6px; background:var(--bg-alt); border-radius:12px; padding:5px; width:fit-content; margin:0 0 32px 0; }

/* ---------- profile image editor (settings page) ---------- */
.img-editor{ position:relative; margin-bottom:78px; }
.cover-edit{
  height:160px; border-radius:16px; background:linear-gradient(120deg, var(--accent), var(--teal));
  background-size:cover; background-position:center; position:relative; overflow:hidden;
}
.cover-edit-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px;
  background:oklch(20% 0 0 / .38); opacity:0; transition:opacity .2s ease; cursor:pointer;
}
.cover-edit:hover .cover-edit-overlay, .cover-edit-overlay:focus-within{ opacity:1; }
.cover-edit-btn{
  display:inline-flex; align-items:center; gap:7px; background:white; color:var(--ink); border:none;
  border-radius:10px; padding:9px 16px; font-size:13.5px; font-weight:700; cursor:pointer;
}
.cover-remove-btn{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; border:none;
  background:oklch(20% 0 0 / .55); color:white; font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.avatar-edit{ position:absolute; left:24px; bottom:-56px; }
.avatar-edit-circle{
  width:112px; height:112px; border-radius:50%; border:5px solid var(--bg); overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:700;
  background:var(--accent-soft); color:var(--accent-dark);
}
.avatar-edit-circle img{ width:100%; height:100%; object-fit:cover; }
.avatar-edit-btn{
  position:absolute; bottom:2px; right:2px; width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:white; border:3px solid var(--bg); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.avatar-edit-btn:hover{ background:var(--accent-dark); }
.avatar-remove-btn{
  position:absolute; top:-2px; right:-2px; width:26px; height:26px; border-radius:50%; border:3px solid var(--bg);
  background:oklch(20% 0 0 / .55); color:white; font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.cover-remove-btn[hidden], .avatar-remove-btn[hidden]{ display:none; }
.mode-tab{
  border:none; background:transparent; padding:9px 20px; border-radius:9px; font-size:13.5px; font-weight:700; color:var(--ink-soft);
  cursor:pointer; transition:background .15s, color .15s;
}
.mode-tab:hover{ color:var(--ink); }
.mode-tab.active{ background:var(--surface); color:var(--ink); box-shadow:var(--om-shadow-sm, 0 1px 3px oklch(0% 0 0 / .08)); }
.mode-switch-mini{ margin:0; padding:3px; gap:3px; border-radius:10px; }
.mode-tab-mini{ padding:8px 15px; font-size:13px; border-radius:7px; }
.mode-tab-mini.active{ background:var(--accent); color:white; box-shadow:0 4px 10px -4px rgba(98,114,84,.45); }

/* ---------- offers / receipts ---------- */
.receipt-badge{
  display:inline-flex; align-self:center; margin:0 auto 14px auto; background:var(--accent-soft); color:var(--accent-dark);
  font-size:13px; font-weight:700; padding:6px 14px; border-radius:999px;
}
.receipt-badge.completed{ background:oklch(94% 0.06 145); color:oklch(30% 0.08 145); }
.receipt-badge.cancelled{ background:var(--om-bg-error-tint, oklch(94% 0.03 25)); color:var(--accent-error, #a63244); }
.auth-title + .receipt-badge, .receipt-badge{ display:block; width:fit-content; }
.receipt-box{ background:var(--bg); border:1.5px solid var(--border); border-radius:14px; padding:18px 20px; margin:20px 0; display:flex; flex-direction:column; gap:10px; }
.receipt-row{ display:flex; justify-content:space-between; gap:16px; font-size:14px; color:var(--ink-soft); }
.receipt-row span:last-child{ color:var(--ink); font-weight:600; text-align:right; }
.receipt-row.total{ border-top:1.5px solid var(--border); padding-top:10px; font-weight:700; }
.receipt-row.total span{ color:var(--ink); font-size:15px; }

.offer-card{
  align-self:flex-start; flex-shrink:0; max-width:min(100%, 320px); min-width:0; background:var(--surface); border:1.5px solid var(--accent); border-radius:14px;
  padding:14px 16px; animation:bubbleIn .25s ease; overflow-wrap:break-word; word-break:break-word;
}
.offer-card.own{ align-self:flex-end; }
.offer-card-label{ font-size:11.5px; font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.offer-card-amount{ font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink); }
.offer-card-note{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
.offer-card-status{ font-size:12px; font-weight:700; margin-top:10px; display:inline-flex; padding:3px 10px; border-radius:999px; }
.offer-card-status.pending{ background:var(--accent-soft); color:var(--accent-dark); }
.offer-card-status.completed{ background:oklch(94% 0.06 145); color:oklch(30% 0.08 145); }
.offer-card-status.cancelled{ background:var(--om-bg-error-tint, oklch(94% 0.03 25)); color:var(--accent-error, #a63244); }
.offer-card-progress{ font-size:12px; color:var(--ink-soft); margin-top:8px; line-height:1.5; }
.offer-card-pay{ display:block; margin-top:10px; text-align:center; }

.meet-card{
  align-self:flex-start; display:flex; align-items:center; gap:12px; max-width:min(100%, 340px); min-width:0;
  background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:12px 14px; margin-top:-2px;
  animation:bubbleIn .25s ease;
}
.meet-card.own{ align-self:flex-end; }
.meet-card-icon{
  width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent-dark); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.meet-card-body{ flex:1; min-width:0; }
.meet-card-title{ font-size:13.5px; font-weight:700; color:var(--ink); }
.meet-card-sub{ font-size:12px; color:var(--ink-soft); margin-top:1px; }
.meet-card-join{
  flex-shrink:0; background:var(--accent); color:white; font-size:12.5px; font-weight:700; padding:8px 14px;
  border-radius:999px; transition:background .15s;
}
.meet-card-join:hover{ background:var(--accent-dark); color:white; }

/* ---------- trade escrow page ---------- */
.trade-columns, .trade-files-panel{ display:flex; gap:16px; margin:22px 0; flex-wrap:wrap; }
.trade-side{ flex:1; min-width:220px; background:var(--bg); border:1.5px solid var(--border); border-radius:14px; padding:16px 18px; }
.trade-side-title{ font-size:13px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.3px; margin-bottom:10px; }
.trade-side-status{ font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:12px; }
.trade-side-status.ok{ color:oklch(40% 0.1 145); }
.trade-hint{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0 0 10px 0; }
.trade-hint.bad{ color:var(--accent-error, #a63244); }
.trade-file-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1.5px solid var(--border); font-size:13.5px; }
.trade-file-row:last-of-type{ border-bottom:none; }
.trade-file-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.trade-file-empty{ font-size:13px; color:var(--ink-soft); padding:6px 0; }
.trade-similarity{
  font-size:13px; font-weight:600; text-align:center; padding:9px 14px; border-radius:10px; margin:0 0 18px 0;
  background:var(--bg-alt); color:var(--ink-soft);
}
.trade-similarity.ok{ background:oklch(94% 0.06 145); color:oklch(30% 0.08 145); }
.trade-similarity.bad{ background:var(--om-bg-error-tint, oklch(94% 0.03 25)); color:var(--accent-error, #a63244); }
.trade-file-drop{
  border:1.5px dashed var(--border); border-radius:10px; padding:20px 16px; text-align:center; font-size:13px;
  color:var(--ink-soft); margin-bottom:6px; cursor:pointer; transition:border-color .15s, background .15s;
}
.trade-file-drop:hover, .trade-file-drop.dragover{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark); }
.trade-pick-folder{
  display:block; width:100%; text-align:center; font-size:12.5px; color:var(--accent); background:none; border:none;
  cursor:pointer; padding:4px 0 12px 0; text-decoration:underline;
}
.trade-pending-list{ display:flex; flex-direction:column; gap:2px; margin-bottom:4px; }
.trade-file-row.pending{ display:flex; flex-direction:column; align-items:stretch; gap:2px; background:var(--bg-alt); border-radius:8px; padding:8px 10px; border-bottom:none; }
.trade-file-row.pending .trade-file-row-top{ display:flex; align-items:center; gap:10px; }
.trade-file-size{ font-size:12px; color:var(--ink-soft); flex-shrink:0; }
.trade-upload-error{ font-size:12.5px; color:var(--accent-error, #a63244); min-height:1em; margin-bottom:6px; }
.trade-upload-progress{ height:4px; border-radius:2px; background:var(--border); overflow:hidden; margin-top:2px; }
.trade-upload-progress-bar{ height:100%; background:var(--accent); width:0%; transition:width .15s; }
.trade-ready-btn{ width:100%; margin-top:4px; }
.trade-ready-btn[hidden]{ display:none; }
.trade-connecting [data-trade-action], .trade-connecting [data-trade-uploader]{ opacity:.5; pointer-events:none; }
.trade-cancel{ display:block; width:fit-content; margin:18px auto 0 auto; text-align:center; color:var(--ink-soft); font-size:13.5px; font-weight:600; background:none; border:none; cursor:pointer; text-decoration:underline; }
.trade-cancel:hover{ color:var(--accent-error, #a63244); }

.send-offer-toggle{
  display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--accent); cursor:pointer; padding:8px 4px;
}
.send-offer-panel{ display:none; gap:10px; padding:12px 4px 4px 4px; flex-wrap:wrap; }
.send-offer-panel.open{ display:flex; }
.send-offer-panel input[type="number"]{ width:110px; flex-shrink:0; }
.send-offer-panel input[type="text"]{ flex:1; }
.extra-chips{ display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.extra-chip{ padding:7px 14px; font-size:12.5px; }
.extra-chip.active{ background:var(--accent); color:var(--surface); border-color:var(--accent); }
.profile-section{ margin-top:8px; }
.profile-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.profile-section-title{ font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--ink); margin:0; }
.become-seller-card{
  background:var(--surface); border:1.5px dashed var(--border); border-radius:16px; padding:32px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.my-service-row{
  display:flex; align-items:center; gap:14px; padding:14px; border:1.5px solid var(--border); border-radius:14px; background:var(--surface);
  margin-bottom:10px; transition:box-shadow .15s, transform .15s;
}
.my-service-row:hover{ box-shadow:var(--om-shadow-sm, 0 1px 3px oklch(0% 0 0 / .08)); transform:translateY(-2px); }
.my-service-thumb{ width:56px; height:56px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; overflow:hidden; }
.my-service-info{ flex:1; min-width:0; }
.my-service-title{ font-size:14.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.my-service-meta{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; }
.my-service-actions{ display:flex; gap:8px; flex-shrink:0; }
.icon-btn{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--border);
  color:var(--ink-soft); background:transparent; transition:border-color .15s, color .15s, background .15s;
}
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.icon-btn.danger:hover{ border-color:var(--accent-error, #a63244); color:var(--accent-error, #a63244); background:var(--om-bg-error-tint, oklch(94% 0.03 25)); }
.icon-btn.lg{ width:44px; height:44px; border-radius:12px; background:var(--surface); }
.icon-btn.on{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

/* ---------- service detail ---------- */
.sd-body{ display:flex; gap:40px; padding:22px 64px 64px 64px; align-items:flex-start; }
.sd-main{ flex:1.65; min-width:0; }
.sd-gallery-main{
  height:380px; border-radius:18px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.sd-gallery-main.has-photo{ background:var(--bg-alt); }
.sd-gallery-main.has-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.sd-gallery-thumbs{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:32px; }
.sd-gallery-thumb{ height:78px; border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s, box-shadow .15s; border:2px solid transparent; }
.sd-gallery-thumb:hover{ transform:translateY(-2px); }
.sd-gallery-thumb.active{ border-color:var(--accent); }
.sd-gallery-main.has-photo{ cursor:zoom-in; }

/* ---------- gallery lightbox ---------- */
.lightbox-overlay{
  position:fixed; inset:0; background:oklch(10% 0.01 55 / .92); z-index:10002; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.lightbox-overlay.open{ opacity:1; pointer-events:auto; }
.lightbox-img{
  max-width:min(1100px, 90vw); max-height:86vh; width:auto; height:auto; object-fit:contain; border-radius:8px;
  box-shadow:0 24px 60px -20px oklch(0% 0 0 / .6);
}
.lightbox-close{
  position:absolute; top:20px; right:24px; width:46px; height:46px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center;
  background:oklch(100% 0 0 / .08); color:white; transition:background .15s;
}
.lightbox-close:hover{ background:oklch(100% 0 0 / .16); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center;
  background:oklch(100% 0 0 / .08); color:white; transition:background .15s;
}
.lightbox-nav:hover{ background:oklch(100% 0 0 / .16); }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }
.lightbox-counter{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:oklch(100% 0 0 / .75); font-size:13.5px; font-weight:600; }
@media (max-width:680px){
  .lightbox-nav{ width:42px; height:42px; }
  .lightbox-prev{ left:6px; }
  .lightbox-next{ right:6px; }
  .lightbox-close{ top:12px; right:12px; }
}
.sd-title{ font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--ink); margin:0 0 16px 0; line-height:1.35; }
.sd-seller-row{ display:flex; align-items:center; gap:14px; padding-bottom:24px; border-bottom:1.5px solid var(--border); margin-bottom:28px; }
.sd-seller-rating{ font-size:12.5px; color:var(--price-ink); font-weight:700; }
.section-h{ font-family:var(--font-display); font-size:21px; font-weight:600; color:var(--ink); margin:0 0 16px 0; }
.sd-section{ margin-bottom:36px; }
.check-row{ display:flex; align-items:flex-start; gap:10px; padding:7px 0; font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.check-row svg{ flex-shrink:0; margin-top:1px; color:var(--accent-dark); }
.num-row{ display:flex; align-items:flex-start; gap:12px; padding:8px 0; }
.num-badge{ width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent-dark); font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.faq-row{ border-bottom:1.5px solid var(--border); padding:16px 0; }
.faq-row:last-child{ border-bottom:none; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; }
.faq-q svg{ flex-shrink:0; transition:transform .2s ease; }
.faq-row.open .faq-q svg{ transform:rotate(180deg); }
.faq-a{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0; overflow:hidden; max-height:0; transition:max-height .25s ease, margin-top .25s ease; }
.faq-row.open .faq-a{ max-height:200px; margin-top:12px; }
.svc-card-sm{ background:var(--surface); border:1.5px solid var(--border); border-radius:14px; overflow:hidden; transition:transform .15s, box-shadow .15s; }
.svc-card-sm:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -16px oklch(30% 0.03 55 / .3); }
.svc-card-sm .thumb{ height:96px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.svc-card-sm.small .thumb{ height:90px; }
.svc-card-sm .body{ padding:12px; }
.svc-card-sm.small .body{ padding:11px; }
.svc-card-sm-title{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.4; }
.svc-card-sm.small .svc-card-sm-title{ font-size:12.5px; }
.svc-card-sm-price{ font-size:12.5px; color:var(--price-ink); font-weight:700; margin-top:8px; }
.svc-card-sm.small .svc-card-sm-price{ font-size:11.5px; margin-top:6px; }
.review-card{ background:var(--surface); border:1.5px solid var(--border); border-radius:16px; padding:20px; overflow-wrap:break-word; word-break:break-word; min-width:0; }
.sd-crumb{ padding:24px 64px 0 64px; font-size:13.5px; color:var(--ink-soft); }

.sd-aside{ width:360px; flex-shrink:0; position:sticky; top:24px; }
.sd-order-card{ background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:26px; box-shadow:var(--om-shadow-card, 0 20px 40px -24px oklch(30% 0.03 55 / .25)); }
.sd-mobile-cta{ display:none; }
.sd-seller-row .icon-btn.lg svg{ width:24px; height:24px; }
.info-pill{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); font-weight:600; }
.guarantee-row{ display:flex; align-items:flex-start; gap:10px; margin-top:20px; padding-top:20px; border-top:1.5px solid var(--border); }

/* ---------- auth forms ---------- */
.auth-wrap{ display:flex; justify-content:center; padding:64px 20px 96px 20px; }
.auth-card{
  width:100%; max-width:420px; background:var(--surface); border:1.5px solid var(--border); border-radius:20px;
  padding:40px 36px; box-shadow:var(--om-shadow-card, 0 18px 44px oklch(0% 0 0 / .08)); animation:authIn .4s ease;
}
@keyframes authIn{ 0%{ opacity:0; transform:translateY(14px) scale(.98); } 100%{ opacity:1; transform:none; } }
.auth-title{ font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--ink); margin:0 0 6px 0; text-align:center; }
.auth-sub{ font-size:14px; color:var(--ink-soft); text-align:center; margin:0 0 28px 0; }
.auth-field{ margin-bottom:16px; }
.auth-field label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.auth-input{
  width:100%; border:1.5px solid var(--border); border-radius:10px; padding:12px 14px; font-size:14.5px; color:var(--ink);
  background:var(--bg); font-family:var(--font-body); transition:border-color .15s, box-shadow .15s;
}
.auth-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.auth-check{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-soft); margin-bottom:20px; cursor:pointer; }
.auth-errors{ background:var(--om-bg-error-tint, oklch(90% 0.05 25)); color:var(--accent-error, #a63244); border-radius:8px; padding:9px 12px; font-size:13px; margin-bottom:14px; }
.auth-submit{ width:100%; }
.support-oneway-note{ margin:-12px 0 22px; padding:12px 14px; border-radius:10px; font-size:13.5px; line-height:1.5; color:var(--ink); background:color-mix(in srgb, #F59E0B 12%, transparent); border:1px solid color-mix(in srgb, #F59E0B 40%, transparent); }
.support-oneway-note a{ color:var(--accent); font-weight:600; }
.auth-card-wide{ max-width:560px; }
.field-hint{ font-size:12px; color:var(--ink-soft); margin-top:5px; }
textarea.auth-input{ resize:vertical; }
.lang-desc-extra{ margin-top:12px; }
.lang-desc-buttons{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.lang-desc-add-btn{ width:auto; padding:8px 14px; font-size:12.5px; }
.gallery-edit-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin:10px 0; }
.gallery-edit-item{ position:relative; display:block; border-radius:10px; overflow:hidden; cursor:pointer; border:1.5px solid var(--border); }
.gallery-edit-item img{ display:block; width:100%; height:76px; object-fit:cover; }
.gallery-edit-delete{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5px; font-size:11.5px; font-weight:700; color:white;
  background:oklch(20% 0.02 30 / 0); opacity:0; transition:opacity .15s, background .15s;
}
.gallery-edit-item:hover .gallery-edit-delete{ opacity:1; background:oklch(20% 0.02 30 / .55); }
.gallery-edit-item:has(input:checked) .gallery-edit-delete{ opacity:1; background:oklch(45% 0.16 25 / .75); }
.gallery-edit-item:has(input:checked){ border-color:var(--accent-error, #a63244); }
.extra-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.extra-row .auth-input{ margin-bottom:0; }
.extra-row input[type="text"]{ flex:2; }
.extra-row input[type="number"]{ flex:1; }
.auth-switch{ text-align:center; font-size:14px; color:var(--ink-soft); margin-top:22px; }

.auth-forgot{ display:inline-block; margin-top:8px; font-size:13px; font-weight:600; }

/* Sign in with Google / GitHub */
.oauth-buttons{ display:flex; flex-direction:column; gap:10px; }
.oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px 16px;
  border:1.5px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink);
  font-size:14.5px; font-weight:600; transition:border-color .15s, background .15s;
}
.oauth-btn:hover{ border-color:var(--ink-soft); background:var(--bg-alt); color:var(--ink); }
.oauth-divider{ display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--ink-soft); font-size:13px; }
.oauth-divider::before, .oauth-divider::after{ content:''; flex:1; height:1.5px; background:var(--border); }

/* Security page (accounts/security.html) */
.sec-block{ border-top:1.5px solid var(--border); padding:22px 0 6px; }
.sec-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.sec-head h2{ font-family:var(--font-display); font-size:16.5px; font-weight:700; color:var(--ink); margin:0; }
.sec-badge{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--bg-alt); color:var(--ink-soft); white-space:nowrap; }
.sec-badge-on{ background:var(--accent-soft); color:var(--accent-dark); }
.sec-text{ font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0 0 16px; }
.sec-steps{ font-size:14px; line-height:1.6; color:var(--ink); padding-left:20px; margin:0 0 16px; }
.sec-qr{ width:200px; margin:0 auto 10px; padding:10px; background:#fff; border-radius:12px; border:1.5px solid var(--border); }
.sec-qr svg{ width:100%; height:auto; }
.sec-secret{ text-align:center; margin:0 0 18px; }
.sec-secret code, .sec-codes code{ font-family:'JetBrains Mono', Consolas, monospace; font-size:13.5px; letter-spacing:.5px; color:var(--ink); }
.sec-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.sec-small{ padding:8px 14px; font-size:13.5px; }
.sec-danger{ color:#c0392b; }
.sec-danger:hover{ border-color:#c0392b; }
.sec-codes{ background:var(--bg-alt); border:1.5px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:18px; font-size:14px; color:var(--ink); }
.sec-codes p{ margin:0 0 10px; line-height:1.55; }
.sec-codes ol{ columns:2; margin:0 0 12px; padding-left:22px; }
.sec-provider{ display:flex; align-items:center; gap:12px; padding:10px 0; }
.sec-provider-name{ font-weight:700; font-size:14.5px; color:var(--ink); }
.sec-link{
  display:flex; align-items:center; gap:12px; margin-top:22px; padding:14px 16px; border:1.5px solid var(--border);
  border-radius:12px; color:var(--ink); transition:border-color .15s, background .15s;
}
.sec-link:hover{ border-color:var(--accent); background:var(--bg-alt); color:var(--ink); }
.sec-link > span:nth-child(2){ flex:1; font-weight:700; font-size:14.5px; }
.form-aside .sec-link{ margin-top:0; background:var(--surface); }
.sec-link small{ display:block; font-weight:500; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.link-btn{ background:none; border:none; padding:0; font:inherit; color:var(--accent); font-weight:700; cursor:pointer; }
.link-btn:hover{ text-decoration:underline; }

/* ---------- wide listing/job posting form ---------- */
.wrap:has(> .form-page-wrap){ max-width:none; }
.form-page-wrap{ padding:48px 20px 96px 20px; }
.form-page{ width:100%; max-width:1180px; margin:0 auto; }
.form-page-head{ margin-bottom:26px; }
.form-page-head h1{ font-family:var(--font-display); font-size:30px; font-weight:600; color:var(--ink); margin:0 0 8px 0; }
.form-page-head p{ font-size:14.5px; color:var(--ink-soft); margin:0; max-width:640px; }
.form-page-head .form-note{ font-size:12.5px; margin-top:6px; }
.form-shell{ display:flex; align-items:flex-start; gap:26px; }
.form-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; }
.form-aside{ width:380px; flex-shrink:0; display:flex; flex-direction:column; gap:20px; position:sticky; top:20px; }
.form-section{
  background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:26px 28px;
  box-shadow:var(--om-shadow-card, 0 12px 32px oklch(0% 0 0 / .05));
}
.form-section h2{ font-family:var(--font-display); font-size:16.5px; font-weight:700; color:var(--ink); margin:0 0 18px 0; }
.form-section h2 .form-section-sub{ display:block; font-family:var(--font-body); font-size:12.5px; font-weight:500; color:var(--ink-soft); margin-top:4px; }
.form-section .auth-field:last-child{ margin-bottom:0; }
.form-row{ display:flex; gap:14px; }
.form-row > .auth-field{ flex:1; min-width:0; }
.form-submit-card{ text-align:center; }
.form-submit-card .btn-primary{ width:100%; }
.form-submit-card .form-note{ margin-top:12px; }

.tile-group{ display:flex; flex-wrap:wrap; gap:9px; }
.tile{
  position:relative; display:flex; align-items:center; gap:8px; padding:11px 16px; border:1.5px solid var(--border);
  border-radius:12px; background:var(--bg); font-size:13.5px; font-weight:600; color:var(--ink-soft); cursor:pointer;
  transition:border-color .15s, color .15s, background .15s, box-shadow .15s; user-select:none;
}
.tile input.tile-radio{ position:absolute; opacity:0; width:0; height:0; margin:0; }
.tile:hover{ border-color:var(--accent); color:var(--ink); }
.tile:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); color:var(--ink); box-shadow:0 0 0 3px var(--accent-soft); }

@media (max-width: 980px){
  .form-shell{ flex-direction:column; }
  .form-aside{ width:100%; position:static; }
}
@media (max-width: 680px){
  .form-page-head h1{ font-size:24px; }
  .form-section{ padding:20px 18px; }
  .form-row{ flex-direction:column; gap:0; }
}

.verify-banner{
  background:var(--accent-soft); color:var(--accent-dark); text-align:center; font-size:13.5px; font-weight:600;
  padding:10px 20px; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
.verify-banner a{ color:var(--accent-dark); text-decoration:underline; font-weight:700; }

/* ---------- chat ---------- */
.inbox-list{ display:flex; flex-direction:column; gap:2px; max-width:760px; margin:0 auto; padding:0 20px; }
/* .inbox-list is also used inside the narrow sidebar drawer (_sidebar_inbox.html),
   where its own max-width is already moot against that much smaller panel —
   this modifier only applies on the full inbox page (chat/inbox.html), widening
   it to the same 64px inset as .page-head above it instead of sitting narrower
   and visibly indented under a header-width title. */
.inbox-list-page{ max-width:none; margin:0; padding:0 64px; }
.inbox-row{
  display:flex; align-items:center; gap:14px; padding:16px; border-radius:14px; border:1.5px solid transparent; transition:background .15s, border-color .15s;
}
.inbox-row:hover{ background:var(--bg-alt); border-color:var(--border); }
.inbox-name{ font-weight:700; font-size:15px; color:var(--ink); }
.inbox-preview{ font-size:13.5px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:420px; }
.inbox-time{ margin-left:auto; font-size:12px; color:var(--ink-soft); flex-shrink:0; }

.chat-wrap{ display:flex; flex-direction:column; max-width:1400px; margin:0 auto; padding:24px 20px 0 20px; height:calc(100vh - 92px); min-height:0; min-width:0; }

/* Full messenger page (chat/thread.html): a persistent conversation list
   on the left, the open thread filling the rest of the viewport width —
   .chat-wrap loses its own centering/max-width here since .chat-main-col
   already defines the available space. .wrap itself caps out at 1440px
   for every other page, so it has to be let go of here too or the whole
   messenger stays boxed into that width instead of the real viewport. */
.wrap:has(> .chat-page){ max-width:none; }
.chat-page{ display:flex; height:calc(100vh - 92px); min-height:0; }
.chat-inbox-col{ width:340px; flex-shrink:0; border-right:1.5px solid var(--border); overflow-y:auto; padding:10px 6px; }
.chat-inbox-row{ padding:12px; }
.chat-inbox-row.active{ background:var(--bg-alt); border-color:var(--border); }
.chat-main-col{ flex:1; min-width:0; display:flex; }
.chat-main-col .chat-wrap{ max-width:none; margin:0; width:100%; height:100%; padding:20px 32px 0 32px; }
@media (max-width: 860px){
  .chat-inbox-col{ display:none; }
  .chat-main-col .chat-wrap{ padding:16px 12px 0 12px; }
}
.chat-head{ display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1.5px solid var(--border); min-width:0; }
.chat-messages{ flex:1; overflow-y:auto; overflow-x:hidden; padding:20px 4px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.bubble{
  max-width:min(70%, 640px); flex-shrink:0; padding:8px 14px 9px 14px; border-radius:16px; font-size:14.5px; line-height:1.5; animation:bubbleIn .25s ease;
  overflow-wrap:break-word; word-break:break-word; min-width:0; overflow:hidden;
}
@keyframes bubbleIn{ 0%{ opacity:0; transform:translateY(8px) scale(.96); } 100%{ opacity:1; transform:none; } }
.bubble.own{ align-self:flex-end; background:var(--accent); color:white; border-bottom-right-radius:4px; }
.bubble.other{ align-self:flex-start; background:var(--bg-alt); color:var(--ink); border-bottom-left-radius:4px; }
/* Support threads only — who on the staff side actually sent this one,
   since "other" there can be any of several different people. */
.bubble-sender{ font-size:11.5px; font-weight:700; opacity:.7; margin-bottom:2px; }
/* Trails at the end of the last line (float, not its own block) so a
   short message's bubble hugs the text instead of being forced as wide
   as the timestamp on a second line. */
.bubble-time{ display:inline-block; float:right; clear:both; font-size:10.5px; opacity:.65; margin:5px 0 0 12px; }
.chat-form{ display:flex; gap:10px; padding:16px 4px 20px 4px; border-top:1.5px solid var(--border); min-width:0; }
.chat-attach-form{ display:flex; align-items:center; gap:8px; padding:8px 4px 0 4px; min-width:0; }
.chat-attach-form select{ flex:1; min-width:0; padding:6px 10px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface); color:var(--ink); font-size:12px; }
.chat-attach-form #attach-status{ font-size:11.5px; }
.chat-input{
  flex:1; min-width:0; max-width:100%; border:1.5px solid var(--border); border-radius:999px; padding:12px 18px; font-size:14.5px; font-family:var(--font-body);
  background:var(--surface); color:var(--ink); transition:border-color .15s;
}
.chat-input::placeholder{ color:var(--ink-soft); }
.chat-input:focus{ outline:none; border-color:var(--accent); }
.chat-send{ width:44px; height:44px; border-radius:50%; border:none; background:var(--accent); color:white; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s, transform .12s; }
.chat-send:hover{ background:var(--accent-dark); }
.chat-send:active{ transform:scale(.92); }
.chat-status{ font-size:12.5px; color:var(--ink-soft); }
.typing-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--ink-soft); margin-right:2px; animation:typingBounce 1.2s infinite; }
.typing-dot:nth-child(2){ animation-delay:.15s; }
.typing-dot:nth-child(3){ animation-delay:.3s; }
@keyframes typingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

@media (max-width: 1180px){
  .cat-grid, .svc-grid, .sub-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .svc-grid.cols-3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .lst-body, .cd-body{ flex-direction:column; }
  .lst-sidebar, .cd-sidebar{ width:100%; }
  .sd-body{ flex-direction:column; }
  .sd-aside{ width:100%; position:static; }
}
@media (max-width: 680px){
  .site-header-inner, .hero, .section, .page-head, .toolbar, .lst-body, .cd-body, .footer-grid,
  .sd-body, .sd-crumb, .cta, .profile-wrap, .inbox-list-page{ padding-left:20px; padding-right:20px; }
  .svc-grid{ grid-template-columns:1fr; }
  .svc-grid.cols-3{ grid-template-columns:1fr; }
  .cat-grid, .sub-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .cat-card{ padding:16px 12px; gap:8px; }
  .cat-icon{ width:38px; height:38px; }
  .cat-title{ font-size:13.5px; }
  .cat-count{ font-size:12px; margin-top:1px; }
  .sub-tile{ padding:18px 10px; gap:8px; }
  .sub-tile-label{ font-size:13px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .cta{ flex-wrap:wrap; text-align:center; justify-content:center; padding-top:36px; padding-bottom:36px; }
  .cta .btn-primary{ width:100%; text-align:center; }
  .stats{ padding-left:20px; padding-right:20px; }
  .stats-inner{ flex-wrap:wrap; gap:20px; justify-content:center; }
  .stat-div{ display:none; }
  .sd-title{ font-size:23px; }
  .hero-title{ font-size:30px; }
  .page-title{ font-size:27px; }
  .auth-card{ padding:30px 22px; }
  .trade-columns, .trade-files-panel{ flex-direction:column; }
  .sd-seller-row .icon-btn.lg{ width:50px; height:50px; }
  .sd-seller-row .icon-btn.lg svg{ width:26px; height:26px; }
  .sd-body{ padding-bottom:92px; }
  .sd-mobile-cta{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:30; padding:12px 16px;
    background:var(--surface); border-top:1.5px solid var(--border); box-shadow:0 -8px 24px -12px oklch(30% 0.03 55 / .25);
  }
  .sd-mobile-cta .btn-primary{ display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; font-size:14px; }
}
@media (max-width: 480px){
  .brand-name{ display:none; }
  .header-left{ flex-wrap:wrap; row-gap:8px; }
  .header-right{ gap:6px; }
  .lang-btn.icon-btn{ padding:8px 9px; }
  .header-login-link{ padding:0 3px !important; font-size:13px; }
  .header-register-btn{ padding:8px 13px; font-size:13px; border-radius:8px; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; gap:14px; text-align:center; }
  .my-service-row{ flex-wrap:wrap; }
  .my-service-actions{ width:100%; justify-content:flex-end; }

  /* Long display names would otherwise stretch the profile hero row (and
     the whole page) wider than the phone screen — nested flex items default
     to min-width:auto (their content's min-content size), so a nowrap name
     silently forces every ancestor flex box wider unless each one in the
     chain is told it's allowed to shrink past its content. */
  .profile-wrap{ width:100%; min-width:0; }
  .profile-hero{ min-width:0; }
  .profile-hero-left{ min-width:0; }
  .profile-hero-info{ min-width:0; flex:1 1 180px; }
  .profile-hero-name-row{ max-width:100%; min-width:0; }
  .profile-hero-name{
    font-size:19px; max-width:100%; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; min-width:0;
  }
}

/* ---------- mobile site nav drawer ---------- */
.site-nav-overlay{
  position:fixed; inset:0; background:oklch(20% 0.02 55 / .35); z-index:10000; opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.site-nav-overlay.open{ opacity:1; pointer-events:auto; }
.site-nav-drawer{
  position:fixed; top:0; left:0; bottom:0; width:300px; max-width:85vw; background:var(--surface);
  border-right:1.5px solid var(--border); box-shadow:16px 0 40px -20px oklch(30% 0.03 55 / .4); z-index:10001;
  display:flex; flex-direction:column; overflow-x:hidden; transform:translateX(-100%); transition:transform .28s cubic-bezier(.34,1.1,.64,1);
}
.site-nav-drawer.open{ transform:translateX(0); }
.site-nav-drawer-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:2px; }
.site-nav-drawer-link{
  display:block; padding:12px 14px; border-radius:10px; font-size:15px; font-weight:600; color:var(--ink-soft);
  transition:background .12s, color .12s;
}
.site-nav-drawer-link:hover, .site-nav-drawer-link.active{ background:var(--bg-alt); color:var(--ink); }
.site-nav-drawer-divider{ height:1.5px; background:var(--border); margin:10px 4px; }
.site-nav-drawer-body .mode-switch{ margin:0; }

.site-nav-drawer-utils:empty{ display:none; }
.site-nav-drawer-body .header-utils{
  flex-direction:column; align-items:stretch; gap:2px; padding-bottom:10px; margin-bottom:8px;
  border-bottom:1.5px solid var(--border);
}
.site-nav-drawer-body .header-utils .icon-btn{
  width:100%; justify-content:flex-start; gap:10px; border:none; border-radius:10px; padding:12px 14px; font-size:15px; font-weight:600; color:var(--ink-soft);
}
.site-nav-drawer-body .header-utils .icon-btn:hover{ background:var(--bg-alt); color:var(--ink); }
.site-nav-drawer-body .drawer-label{ display:inline; flex:1; text-align:left; }
.site-nav-drawer-body .nav-badge{ margin-left:auto; }
.site-nav-drawer-body .lang-menu{
  position:static !important; transform:none !important; opacity:1 !important; pointer-events:auto !important;
  box-shadow:none !important; border:none !important; padding:0 14px !important; min-width:0 !important; max-width:none !important;
  max-height:0 !important; overflow:hidden; transition:max-height .2s ease;
}
.site-nav-drawer-body .lang-menu.open{ max-height:400px !important; padding:4px 14px 10px 14px !important; }
.site-nav-drawer-body .lang-item{ padding:9px 10px; }

/* Pricing preview modal (native <dialog> — its ::backdrop gives the
   overlay for free) shown before "add listing" / "boost" navigate away,
   per the PayPal pricing flow. */
.pricing-modal{
  border:1.5px solid var(--border); border-radius:16px; padding:24px; max-width:380px; width:calc(100% - 32px);
  background:var(--surface); color:var(--ink); box-shadow:0 24px 60px -20px oklch(30% 0.03 55 / .5);
}
.pricing-modal::backdrop{ background:oklch(20% 0.02 55 / .45); }
.pricing-modal h3{ margin:0 0 10px; font-size:18px; font-weight:700; }
.pricing-modal p{ margin:0 0 8px; font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.pricing-modal .price-highlight{ font-size:20px; font-weight:700; color:var(--ink); }
.pricing-modal .modal-actions{ display:flex; gap:10px; margin-top:18px; }
.pricing-modal .modal-actions .btn-primary,
.pricing-modal .modal-actions .btn-ghost{ flex:1; text-align:center; padding:11px 16px; font-size:14px; }
.boost-options{ display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.boost-option{
  display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px;
  border:1.5px solid var(--border); border-radius:12px; color:inherit; font-weight:600; font-size:14px;
  transition:border-color .15s, background .15s;
}
.boost-option:hover{ border-color:var(--accent); background:var(--bg-alt); }
.boost-option .boost-price{ color:var(--ink-soft); font-weight:500; }
.boost-option .boost-price{ margin-left:auto; }
.boost-bonus{ font-size:12px; font-weight:700; color:var(--accent-dark); background:var(--accent-soft); padding:3px 8px; border-radius:999px; white-space:nowrap; }

/* Staff-granted bonus balance on the profile page (billing.services). */
.bonus-card{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:24px; padding:14px 16px;
  border:1.5px solid var(--accent); border-radius:14px; background:var(--accent-soft);
}
.bonus-card-title{ font-weight:800; font-size:14px; color:var(--accent-dark); }
.bonus-card-items{ display:flex; flex-wrap:wrap; gap:8px; }
.bonus-pill{ font-size:13px; font-weight:600; color:var(--ink); background:var(--surface); border:1.5px solid var(--border); padding:4px 10px; border-radius:999px; }
.bonus-pay{ margin:20px 0 0; padding:14px 16px; border:1.5px solid var(--accent); border-radius:12px; background:var(--accent-soft); font-size:14px; color:var(--ink); }

/* Long-form SEO copy: home intro, category text, landing pages. */
.seo-text{ max-width:860px; }
.seo-text .section-title{ margin-bottom:14px; }
.seo-text h2{ margin-top:28px; }
.seo-text p, .seo-text li{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin:0 0 12px; }
.seo-text a{ color:var(--accent); }
.seo-faq{ max-width:860px; }
.seo-faq details{ border-bottom:1.5px solid var(--border); padding:14px 0; }
.seo-faq summary{ font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; }
.seo-faq details p{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin:10px 0 0; }
.seo-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
@media (min-width:1181px){
}
@keyframes st-code-caret{ 50%{ opacity:0; } }
@media (min-width:1181px){
}
@media (min-width:1181px){
}
@media (min-width:1181px){
}
@media (min-width:1181px){
}
@media (min-width:1181px){
}
@media (min-width:1181px){
}

@media (prefers-reduced-motion: reduce){
}

/* ==========================================================================
   Filters on small screens: the listing sidebar (.lst-sidebar) turns into
   a bottom sheet opened by the "Filters" button in the toolbar instead of
   stacking the whole filter column above the results. Category navigation
   becomes a sideways-scrolling strip. Desktop layout is untouched.
   ========================================================================== */
.filter-toggle, .sheet-head, .sheet-foot{ display:none; }

@media (max-width: 1180px){
  .filter-toggle{
    display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px;
    border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
    font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  }
  .filter-toggle:hover{ border-color:var(--ink-soft); }
  .filter-count{
    display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
    border-radius:999px; background:var(--accent); color:#fff; font-size:11.5px; font-weight:700;
  }
  .filter-count[hidden]{ display:none; }

  .lst-sidebar{
    position:fixed; left:0; right:0; bottom:0; z-index:10002; width:100% !important; max-height:85vh;
    padding:0 20px; gap:24px; overflow-y:auto; overscroll-behavior:contain;
    background:var(--surface); border-radius:20px 20px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.22);
    transform:translateY(105%); visibility:hidden;
    transition:transform .32s cubic-bezier(.2,.9,.25,1), visibility 0s linear .32s;
  }
  .lst-sidebar.sheet-open{
    transform:none; visibility:visible;
    transition:transform .32s cubic-bezier(.2,.9,.25,1), visibility 0s;
  }
  .sheet-head{
    display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:1;
    margin:0 -20px; padding:20px 20px 12px; background:var(--surface); border-bottom:1.5px solid var(--border);
  }
  .sheet-grip{ position:absolute; top:8px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--border); }
  .sheet-title{ font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--ink); }
  .sheet-close{
    width:36px; height:36px; border:none; border-radius:50%; background:var(--bg-alt); color:var(--ink);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .sheet-head + .side-block{ border-top:none; padding-top:0; }
  .sheet-foot{
    display:block; position:sticky; bottom:0; margin:auto -20px 0; padding:12px 20px calc(16px + env(safe-area-inset-bottom));
    background:var(--surface); border-top:1.5px solid var(--border);
  }
  .sheet-foot .btn-primary{ width:100%; }
  .filter-backdrop{ position:fixed; inset:0; z-index:10001; background:rgba(0,0,0,.45); opacity:0; transition:opacity .25s ease; }
  .filter-backdrop.open{ opacity:1; }
  html.sheet-lock, html.sheet-lock body{ overflow:hidden; }

  /* category page: the category list becomes a horizontal strip */
  .cd-sidebar{ flex-direction:row; overflow-x:auto; padding:8px; gap:6px; scrollbar-width:none; }
  .cd-sidebar::-webkit-scrollbar{ display:none; }
  .cd-sidebar .top-item{ flex-shrink:0; white-space:nowrap; padding:9px 14px; }
  .cd-sidebar .top-item:hover{ padding-left:14px; }
}

@media (max-width: 680px){
  .toolbar .chip-scroll{
    flex:1 1 100%; min-width:0; flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none;
    margin:0 -20px; padding:0 20px 4px;
  }
  .toolbar .chip-scroll::-webkit-scrollbar{ display:none; }
  .toolbar .chip-scroll .chip{ flex-shrink:0; }
}

@media (prefers-reduced-motion: reduce){
  .lst-sidebar, .lst-sidebar.sheet-open, .filter-backdrop{ transition:none; }
}

/* ---------- 404 page (marketplace/templates/404.html) ---------- */
.nf{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width:720px; margin:0 auto; padding:72px 24px 96px;
}
.nf-code{
  display:flex; align-items:center; gap:6px; line-height:1;
  font-family:var(--font-display); font-size:clamp(96px, 18vw, 168px); font-weight:800; letter-spacing:-4px;
  color:var(--ink);
}
.nf-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:.86em; height:.86em; margin:0 .04em; border-radius:50%;
  background:var(--accent-soft); color:var(--ink-soft);
  box-shadow:0 18px 40px -22px color-mix(in srgb, var(--accent) 70%, transparent);
  animation:nf-float 4.5s ease-in-out infinite;
}
.nf-mark svg{ width:62%; height:62%; }
@keyframes nf-float{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(-6deg); }
}
.nf-title{ font-family:var(--font-display); font-size:30px; font-weight:800; color:var(--ink); margin:28px 0 10px; }
.nf-text{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 26px; max-width:520px; }
.nf-search{ max-width:560px; margin:0 0 20px; }
.nf-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.nf-actions .btn-primary, .nf-actions .btn-ghost{ padding:13px 24px; font-size:15px; }
.nf-popular{ margin-top:40px; }
.nf-popular-title{ font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.nf-chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
@media (max-width: 680px){
  .nf{ padding:48px 20px 72px; }
  .nf-title{ font-size:24px; }
  .nf-search .search-btn{ padding:0 18px; height:50px; }
}
@media (prefers-reduced-motion: reduce){
  .nf-mark{ animation:none; }
}

/* Staff promotions (billing.Promotion): strip under the header + price pill */
.promo-pill{ display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; background:var(--accent); color:#fff; font-size:12px; font-weight:700; white-space:nowrap; }
.promo-banner{ background:var(--accent-soft); color:var(--accent-dark); border-bottom:1px solid var(--border); }
.promo-banner-inner{ max-width:1200px; margin:0 auto; padding:9px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; }
.promo-banner-text{ flex:1 1 240px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.promo-reward{ font-weight:700; }
.promo-reward + .promo-reward::before{ content:"+ "; font-weight:400; }
.promo-banner-until{ opacity:.8; }
.promo-banner-cta{ padding:5px 14px; border-radius:8px; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; font-size:13px; }
.promo-banner-close{ background:none; border:0; color:inherit; font-size:20px; line-height:1; cursor:pointer; padding:0 4px; }

/* News (/news/) */
/* News list: one wide strip per post — cover on the left, text on the right. */
.news-grid{ display:flex; flex-direction:column; gap:14px; }
.news-card{
  display:flex; flex-direction:column; background:var(--surface); border:1.5px solid var(--border); border-radius:16px;
  overflow:hidden; color:var(--ink); text-decoration:none; transition:transform .18s ease, border-color .18s ease;
}
.news-card{ flex-direction:row; align-items:stretch; }
.news-card:hover{ transform:translateX(4px); border-color:var(--accent); }
.news-card-cover{ width:340px; flex-shrink:0; aspect-ratio:16/9; object-fit:cover; display:block; }
.news-card-body{ padding:22px 26px; display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:0; flex:1; }
.news-card-title{ font-family:var(--font-display); font-size:18px; font-weight:600; margin:0; line-height:1.35; }
.news-card-summary{ font-size:14px; color:var(--ink-soft); margin:0; line-height:1.55; }
.news-date{ font-size:13px; color:var(--ink-soft); }
.news-article{ max-width:860px; }
.news-article .news-date{ display:block; margin:10px 0 6px; }
.news-cover{ width:100%; border-radius:16px; margin:14px 0 22px; display:block; }
.news-body{ padding-bottom:12px; }
@media (max-width:760px){
  .news-card{ flex-direction:column; }
  .news-card-cover{ width:100%; }
}

/* ---- Review lists (marketplace/_reviews_block.html + reviews.js) ---- */
.reviews{ display:flex; flex-direction:column; gap:12px; transition:opacity .15s; }
.reviews.is-loading{ opacity:.6; }
.reviews .review-card + .review-card{ margin-top:12px; }
.reviews-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.reviews-stars{ display:flex; gap:6px; flex-wrap:wrap; }
.reviews-stars .chip{ padding:7px 13px; font-size:12.5px; cursor:pointer; }
.reviews-stars .chip:hover{ transform:none; }
.reviews-more{ align-self:center; padding:10px 22px; font-size:14px; }
.reviews-hint{ font-size:13px; color:var(--ink-soft); margin:14px 0 0; }
.review-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.review-avatar{ width:34px; height:34px; font-size:12px; flex-shrink:0; }
.review-who{ min-width:0; flex:1; }
.review-name{ font-size:14px; font-weight:700; color:var(--ink); }
.review-meta{ font-size:12.5px; color:var(--ink-soft); }
.review-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.review-actions .icon-btn{ padding:0; }
.review-listing{ display:inline-block; font-size:12.5px; font-weight:600; color:var(--accent); margin-bottom:6px; }
.review-text{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0; }
.review-like{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:5px 11px; border-radius:999px;
  border:1.5px solid var(--border); background:none; color:var(--ink-soft); font:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.review-like:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.review-like.liked{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark, var(--accent)); }
.review-like:disabled{ cursor:default; opacity:.75; }

/* ---- Owner's listing rows: views / contacts / expiry ---- */
.listing-stats{ display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; margin-top:6px; font-size:12.5px; color:var(--ink-soft); }
.listing-stats > span{ display:inline-flex; align-items:center; gap:5px; }
.listing-expiry.warn{ color:var(--price-ink); font-weight:700; }
.listing-expiry.danger{ color:#c0392b; font-weight:700; }
.renewal-banner{
  display:flex; gap:12px; align-items:flex-start; margin:18px 0 0; padding:14px 18px; border-radius:14px;
  border:1.5px solid #e8a39b; background:color-mix(in srgb, #c0392b 8%, var(--surface)); color:var(--ink); font-size:14px; line-height:1.5;
}
.renewal-banner svg{ color:#c0392b; flex-shrink:0; margin-top:2px; }

/* ---- Chat rating card (chat/_rating_card.html) ---- */
button.rating-request-btn{ border:none; background:none; font-family:inherit; }
button.rating-request-btn:disabled{ color:var(--ink-soft); cursor:default; opacity:.7; }
.rating-card{ max-width:min(100%, 340px); }
.rating-card-listing{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.rating-card-stars{ color:var(--price-ink); font-size:18px; letter-spacing:1px; margin-top:6px; }
.rating-card-form{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.rating-card-form .star-input label{ font-size:28px; }
.rating-card-form textarea{ resize:vertical; min-height:60px; }
.rating-card-error{ font-size:12.5px; color:#c0392b; }

/* ---- Favorites: Steam-wishlist-style strips ---- */
.fav-list{ display:flex; flex-direction:column; gap:8px; }
.fav-row{
  display:flex; align-items:stretch; gap:18px; min-height:96px; padding:0 22px 0 0; border-radius:14px; overflow:hidden;
  background:var(--surface); border:1.5px solid var(--border); color:var(--ink);
  transition:border-color .15s, transform .15s, background .15s;
}
.fav-row:hover{ border-color:var(--accent); background:var(--bg-alt); transform:translateX(4px); color:var(--ink); }
.fav-thumb{ position:relative; width:220px; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.fav-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fav-main{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:14px 0; }
.fav-title{ font-family:var(--font-display); font-size:18px; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fav-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); }
.fav-tag{ padding:3px 9px; border-radius:6px; background:var(--bg-alt); border:1px solid var(--border); font-size:12px; font-weight:600; }
.fav-avatar{ width:22px; height:22px; font-size:9.5px; }
.fav-info{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; flex-shrink:0; font-size:13px; color:var(--ink-soft); }
.fav-rating{ color:var(--price-ink); font-weight:700; }
.fav-price{ display:flex; align-items:center; justify-content:flex-end; gap:5px; min-width:120px; flex-shrink:0; font-size:16px; font-weight:700; color:var(--ink); white-space:nowrap; }
.fav-price-from, .fav-price-soft{ font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.fav-price-soft{ white-space:normal; text-align:right; }
@media (max-width:760px){
  .fav-row{ flex-wrap:wrap; padding:0; gap:0; }
  .fav-thumb{ width:100%; height:120px; }
  .fav-main{ padding:14px 16px 4px; }
  .fav-title{ white-space:normal; }
  .fav-info{ flex-direction:row; align-items:center; padding:0 16px 14px; }
  .fav-price{ margin-left:auto; padding:0 16px 14px; min-width:0; }
}

/* ---------- discord reminder (home) ---------- */
.discord-note{
  display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:16px;
  background:var(--bg-alt); border:1.5px solid var(--border); color:var(--ink); text-decoration:none;
  transition:border-color .15s, transform .15s;
}
.discord-note:hover{ border-color:#5865F2; transform:translateY(-1px); }
.discord-note-icon{
  flex:none; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:#5865F2; color:#fff;
}
.discord-note-text{ flex:1; min-width:0; font-size:14px; line-height:1.5; color:var(--ink-soft); }
.discord-note-text strong{ color:var(--ink); font-weight:700; margin-right:4px; }
.discord-note-go{ flex:none; font-size:13.5px; font-weight:600; color:#5865F2; white-space:nowrap; }
@media (max-width: 520px){
  .discord-note{ flex-wrap:wrap; }
  .discord-note-go{ width:100%; padding-left:54px; }
}

/* ---- Header "Post a project" + appearance (settings page) ---- */
.header-post-btn{
  display:inline-flex; align-items:center; white-space:nowrap; border:1.5px solid var(--accent); color:var(--accent);
  border-radius:10px; padding:9px 14px; font-size:14px; font-weight:700; transition:background .15s, color .15s;
}
.header-post-btn:hover{ background:var(--accent); color:oklch(99% 0.005 75); }
@media (max-width: 1200px){ .header-post-btn{ display:none; } }
.appearance-btn{ display:inline-flex; align-items:center; gap:9px; padding:10px 16px; font-size:14.5px; }
.appearance-wrap{ position:relative; display:inline-block; }

/* ---- Home: hero actions, how-it-works, empty state ---- */
.hero-sub{ font-size:17px; line-height:1.55; color:var(--ink-soft); max-width:640px; margin:12px auto 0; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px; }
.hero-actions .btn-primary, .hero-actions .btn-ghost{ display:inline-flex; align-items:center; }
.hero-offer-link{ display:inline-block; margin-top:14px; font-size:14.5px; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }
.hero-offer-link:hover{ color:var(--accent); }
.home-mode-bar{ display:flex; justify-content:center; margin:8px 0 0; }
.steps-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.step-card{ background:var(--surface, #fff); border:1px solid var(--border); border-radius:16px; padding:22px; }
.step-num{ width:34px; height:34px; border-radius:50%; background:var(--accent-soft, #E7F5EC); color:var(--accent); font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.step-title{ font-weight:700; font-size:16.5px; color:var(--ink); margin-bottom:6px; }
.step-text{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); }
@media (max-width: 860px){ .steps-grid{ grid-template-columns:1fr; } }
.empty-card{ text-align:center; border:1.5px dashed var(--border); border-radius:16px; padding:34px 22px; background:var(--surface, #fff); }
.empty-card-title{ font-size:18px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.empty-card-text{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; max-width:560px; margin:0 auto; }
.empty-card-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:16px; }
.empty-card-actions .btn-primary, .empty-card-actions .btn-ghost{ display:inline-flex; align-items:center; padding:10px 18px; font-size:14px; }
.filter-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
.filter-chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:13px; color:var(--ink); }
.filter-chip:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- Sponsored label ---- */
.sponsored-badge{
  position:absolute; top:10px; right:10px; z-index:2; background:oklch(98% 0.01 90 / .92); color:oklch(35% 0.02 60);
  border-radius:6px; padding:2px 8px; font-size:11.5px; font-weight:700; letter-spacing:.02em;
}
.svc-thumb .sponsored-badge + .svc-price{ top:auto; }
.job-sponsored{ display:inline-block; margin-left:6px; font-size:11.5px; font-weight:700; color:var(--ink-soft); border:1px solid var(--border); border-radius:6px; padding:1px 7px; }

/* ---- Draft preview banner ---- */
.draft-banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin:18px auto 0; max-width:1200px; padding:14px 18px; border-radius:12px;
  background:var(--accent-soft, #E7F5EC); border:1px solid var(--accent); color:var(--ink); font-size:14.5px;
}
.draft-banner-actions{ display:flex; gap:10px; align-items:center; }
.draft-banner-actions form{ margin:0; }
.draft-banner-actions .btn-primary, .draft-banner-actions .btn-ghost{ padding:8px 16px; font-size:14px; display:inline-flex; }

/* ---- Brief builder steps ---- */
[data-step][hidden], [data-brief-nav][hidden], [data-brief-steps][hidden]{ display:none !important; }
.brief-steps{ display:flex; gap:8px; list-style:none; padding:0; margin:0 0 18px; counter-reset:brief; flex-wrap:wrap; }
.brief-steps li{
  counter-increment:brief; flex:1; min-width:120px; cursor:pointer; padding:10px 12px; border-radius:10px;
  border:1.5px solid var(--border); font-size:13.5px; font-weight:600; color:var(--ink-soft); background:var(--surface, #fff);
}
.brief-steps li::before{ content:counter(brief) ". "; }
.brief-steps li.active{ border-color:var(--accent); color:var(--accent); }
.brief-steps li.done{ color:var(--ink); }
.brief-nav{ display:flex; justify-content:space-between; gap:10px; margin:6px 0 18px; }
.brief-nav .btn-primary, .brief-nav .btn-ghost{ padding:10px 20px; font-size:14.5px; }
.brief-nav [hidden]{ display:none; }
.brief-review{ display:flex; flex-direction:column; gap:10px; }
.brief-review-row{ display:grid; grid-template-columns:180px 1fr; gap:12px; font-size:14.5px; }
.brief-review-label{ color:var(--ink-soft); }
.brief-review-value{ color:var(--ink); white-space:pre-line; }
@media (max-width: 680px){ .brief-review-row{ grid-template-columns:1fr; gap:2px; } }
.field-invalid{ border-color:var(--accent-error, #a63244) !important; }
.form-shell.is-stepped{ flex-direction:column; align-items:stretch; max-width:760px; margin:0 auto; }
.form-shell.is-stepped .form-aside{ width:100%; position:static; }

/* ---- Application decline box ---- */
.decline-box{ display:inline-block; }
.decline-box summary{ list-style:none; cursor:pointer; display:inline-flex; }
.decline-box summary::-webkit-details-marker{ display:none; }
.decline-box[open]{ display:block; width:100%; }
.decline-box form{ margin-top:8px; }
.decline-box textarea{ width:100%; }

/* ---- Support tickets ---- */
.ticket-list{ display:flex; flex-direction:column; gap:6px; margin-top:16px; }
.ticket-row{ display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:10px; color:var(--ink); }
.ticket-row:hover{ border-color:var(--accent); }
.ticket-subject{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ticket-date{ font-size:13px; color:var(--ink-soft); }
.ticket-status{ font-size:12px; font-weight:700; border-radius:6px; padding:2px 8px; background:var(--bg-alt); color:var(--ink-soft); }
.ticket-status-open{ background:oklch(95% 0.05 85); color:oklch(40% 0.08 70); }
.ticket-status-answered{ background:var(--accent-soft, #E7F5EC); color:var(--accent); }
.ticket-thread{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.ticket-msg{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.ticket-msg-staff{ background:var(--accent-soft, #E7F5EC); border-color:transparent; }
.ticket-msg-meta{ font-size:12.5px; color:var(--ink-soft); margin-bottom:6px; }
.ticket-msg-body{ white-space:pre-line; font-size:14.5px; color:var(--ink); line-height:1.55; }

/* ---- Projects ---- */
.project-page{ max-width:1200px; margin:0 auto; padding:28px 64px 60px; }
@media (max-width: 860px){ .project-page{ padding:20px 16px 40px; } }
.project-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.project-head-side{ display:flex; gap:10px; align-items:center; }
.project-next{ margin:16px 0 20px; padding:12px 16px; border-radius:12px; background:var(--accent-soft, #E7F5EC); color:var(--ink); font-weight:600; font-size:14.5px; }
.project-grid{ display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
@media (max-width: 980px){ .project-grid{ grid-template-columns:1fr; } }
.project-main, .project-side{ display:flex; flex-direction:column; gap:16px; }
.project-card{ background:var(--surface, #fff); border:1px solid var(--border); border-radius:16px; padding:18px 20px; }
.project-scope{ white-space:pre-line; font-size:14.5px; line-height:1.6; color:var(--ink); }
.project-terms{ display:flex; gap:18px; flex-wrap:wrap; margin-top:10px; font-size:14px; color:var(--ink-soft); }
.project-change{ margin-top:16px; padding:14px; border:1.5px dashed var(--accent); border-radius:12px; }
.project-change-form{ margin-top:14px; }
.project-change-form summary, .project-note-action summary{ list-style:none; cursor:pointer; display:inline-flex; }
.project-change-form summary::-webkit-details-marker, .project-note-action summary::-webkit-details-marker{ display:none; }
.project-change-form form, .project-note-action form{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.project-actions-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; margin-top:10px; }
.project-actions-row form{ margin:0; }
.project-actions-row .btn-primary, .project-actions-row .btn-ghost, .project-note-action summary{ padding:9px 16px; font-size:14px; }
.project-note-action[open]{ flex-basis:100%; }
.project-action-form{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.project-action-form .btn-primary{ align-self:flex-start; padding:9px 18px; }
.project-delivery{ padding:10px 0; border-bottom:1px solid var(--border); }
.project-delivery:last-child{ border-bottom:none; }
.project-file{ display:inline-block; margin-top:6px; font-weight:600; color:var(--accent); }
.project-events{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:13.5px; }
.project-event-note{ white-space:pre-line; color:var(--ink-soft); margin-top:2px; }
.project-status{ font-size:12.5px; font-weight:700; border-radius:7px; padding:3px 10px; background:var(--bg-alt); color:var(--ink-soft); white-space:nowrap; }
.project-status-proposed, .project-status-submitted{ background:oklch(95% 0.05 85); color:oklch(40% 0.08 70); }
.project-status-agreed, .project-status-in_progress, .project-status-revision{ background:oklch(94% 0.04 250); color:oklch(40% 0.1 255); }
.project-status-completed{ background:var(--accent-soft, #E7F5EC); color:var(--accent); }
.project-status-disputed{ background:oklch(94% 0.04 25); color:oklch(45% 0.15 25); }
.project-list{ display:flex; flex-direction:column; gap:8px; }
.project-row{ display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--border); border-radius:12px; color:var(--ink); }
.project-row:hover{ border-color:var(--accent); }
.project-row-title{ font-weight:700; }
.project-row-who{ font-size:13px; color:var(--ink-soft); }
@media (max-width: 680px){ .project-row{ grid-template-columns:1fr; gap:4px; } }
.chat-projects{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 16px; border-bottom:1px solid var(--border); font-size:13px; }
.chat-projects a.project-chip{ display:inline-flex; gap:6px; align-items:center; border:1px solid var(--border); border-radius:999px; padding:4px 10px; color:var(--ink); }
.chat-projects a.project-chip:hover{ border-color:var(--accent); }

/* ---- Report link ---- */
.report-box{ margin:10px 0; font-size:13px; }
.report-box summary{ cursor:pointer; color:var(--ink-soft); list-style:none; display:inline-block; }
.report-box summary::-webkit-details-marker{ display:none; }
.report-box summary:hover{ color:var(--accent-error, #a63244); }
.report-box form{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.report-box .btn-ghost{ align-self:flex-start; padding:6px 12px; font-size:13px; }

/* ---- Save search ---- */
.save-search-form{ margin:10px 0 0; }
.save-search-btn{ display:flex; justify-content:center; width:100%; padding:9px; font-size:13.5px; }