/* Task4Pay Services Marketplace — shared design system.
 * Uses the project's own CSS variables (dark/light themes follow automatically).
 * Class prefix svc-* : zero collision risk with global stylesheet. */
.svc-wrap{max-width:1080px;margin:0 auto;padding:1.2rem 1rem 3rem}
.svc-h1{font-size:1.5rem;margin:0 0 .3rem;display:flex;align-items:center;gap:.6rem}
.svc-sub{color:var(--text-secondary);font-size:.9rem;margin:0 0 1.2rem;line-height:1.6}
.svc-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;padding:1.4rem;margin-bottom:1.1rem}
.svc-card h2{margin:0 0 1rem;font-size:1.1rem}
.svc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:640px){.svc-grid2{grid-template-columns:1fr}.svc-card{padding:1.1rem .9rem}}
.svc-fg{margin-bottom:.9rem}
.svc-fg>label{display:block;font-size:.82rem;font-weight:600;color:var(--text-secondary);margin-bottom:.35rem}
.svc-fg>label .req{color:var(--primary-color)}
.svc-fi,.svc-card input[type=text],.svc-card input[type=number],.svc-card input[type=file],.svc-card select,.svc-card textarea{width:100%;box-sizing:border-box;background:var(--bg-darker);border:1px solid var(--border-color);border-radius:9px;color:var(--text-primary);font-size:.9rem;padding:.6rem .75rem;font-family:inherit}
.svc-card textarea{resize:vertical;min-height:90px;line-height:1.55}
.svc-card input:focus,.svc-card select:focus,.svc-card textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(255,0,0,.15)}
.svc-hint{font-size:.75rem;color:var(--text-secondary);margin-top:.3rem}
.svc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:linear-gradient(180deg,var(--accent-color,#ff3333),var(--primary-color));color:#fff;border:none;border-radius:999px;padding:.68rem 1.7rem;font-weight:800;font-size:.88rem;letter-spacing:.04em;cursor:pointer;box-shadow:var(--neon-glow);transition:transform .12s,box-shadow .12s,opacity .12s;text-decoration:none}
.svc-btn:hover{transform:translateY(-1px);box-shadow:var(--neon-glow-intense);opacity:.95}
.svc-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.svc-btn-green{background:linear-gradient(180deg,#0fd67c,#0a9e57);box-shadow:0 0 20px rgba(0,255,136,.25)}
.svc-btn-ghost{background:transparent;border:1px solid var(--border-color);color:var(--text-primary);box-shadow:none;font-weight:600}
.svc-btn-sm{padding:.4rem .95rem;font-size:.78rem}
.svc-row-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.svc-listing{display:flex;gap:1rem;align-items:flex-start;background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;padding:1rem;margin-bottom:.8rem;flex-wrap:wrap}
.svc-listing img.svc-thumb{width:120px;height:80px;object-fit:cover;border-radius:9px;flex-shrink:0;background:var(--bg-darker)}
.svc-listing .grow{flex:1;min-width:220px}
.svc-status{font-size:.75rem;font-weight:700;padding:.22rem .7rem;border-radius:999px;white-space:nowrap}
.svc-st-draft{background:rgba(150,150,150,.15);color:#aaa}
.svc-st-pending{background:rgba(255,190,0,.15);color:#ffbe00}
.svc-st-published{background:rgba(0,255,136,.13);color:var(--money)}
.svc-st-rejected{background:rgba(255,60,60,.13);color:#ff6b6b}
.svc-st-paused{background:rgba(120,140,255,.15);color:#8fa2ff}
.svc-st-completed{background:rgba(0,255,136,.13);color:var(--money)}
.svc-st-cancelled{background:rgba(150,150,150,.15);color:#999}
.svc-st-disputed{background:rgba(255,130,0,.15);color:#ff9a3c}
.svc-st-archived{background:rgba(150,150,150,.18);color:#bbb}
.svc-st-in_progress{background:rgba(80,170,255,.15);color:#5aa9ff}
.svc-st-delivered{background:rgba(180,120,255,.15);color:#b78bff}
.svc-meta{font-size:.82rem;color:var(--text-secondary);margin-top:.3rem}
.svc-note{font-size:.82rem;margin-top:.4rem;padding:.5rem .8rem;border-radius:8px;background:rgba(255,190,0,.08);border:1px solid rgba(255,190,0,.25)}
.svc-note.err{background:rgba(255,60,60,.08);border-color:rgba(255,60,60,.3)}
.svc-empty{text-align:center;padding:2.5rem 1rem;color:var(--text-secondary)}
.svc-empty .big{font-size:3rem;opacity:.45;margin-bottom:.8rem}
.svc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.svc-gcard{display:block;background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .12s,border-color .12s}
.svc-gcard:hover{transform:translateY(-3px);border-color:var(--primary-color)}
.svc-gcard img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg-darker)}
.svc-gcard .pad{padding:.85rem .95rem}
.svc-gcard .t{font-weight:700;margin-bottom:.25rem;line-height:1.4}
.svc-gcard .d{font-size:.8rem;color:var(--text-secondary);min-height:2.5em;margin-bottom:.5rem}
.svc-gcard .m{display:flex;justify-content:space-between;align-items:center;font-size:.85rem}
.svc-price{font-weight:800;font-size:1.05rem;color:var(--money)}
.svc-kyc{color:#22c55e;font-weight:700}
/* Detail hero: full image, never cropped or stretched. Tall portraits are
   letterboxed on the theme background and capped so layout stays bounded. */
.svc-hero{background:var(--bg-darker);border-radius:14px;margin-bottom:1rem;overflow:hidden}
.svc-hero img{display:block;width:100%;max-height:520px;object-fit:contain}
.svc-feat{position:absolute;top:.5rem;inset-inline-start:.5rem;background:rgba(0,0,0,.65);color:#ffd54a;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:20px}
.svc-filterbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem;align-items:center}
.svc-filterbar .svc-fi{width:auto;min-width:150px}
.svc-pages{display:flex;gap:.4rem;margin-top:1.2rem;flex-wrap:wrap;align-items:center}
.svc-msg{margin-bottom:.6rem;font-size:.88rem}
.svc-msg small{color:var(--text-secondary)}
.svc-thread-msg{width:100%;box-sizing:border-box;background:var(--bg-darker);border:1px solid var(--border-color);border-radius:9px;color:var(--text-primary);padding:.6rem .75rem}