/* HIREDIT theme: light Gen Z. Client = violet, Editor = lime + cyan. */
:root{
  --bg:#F6F5FF;--ink:#12121C;--muted:#5E5E78;--card:#FFFFFF;--line:#D9D6EE;--field:#8B88A8;
  --accent:#6C4DFF;--onacc:#FFFFFF;--pop:#FFE45C;--pink:#FF6FB1;
  --lime:#C8FF3D;--lav:#B9A6FF;--sky:#8CCBFF;--peach:#FFEB9C;--sand:#E9E6FA;
}
body[data-role=editor]{--bg:#F7FBEA;--accent:#C8FF3D;--onacc:#12121C;--pop:#35D6FF;--line:#DCE8B8;--field:#8B9670}
body{background-image:radial-gradient(circle at 1px 1px,rgba(18,18,28,.08) 1.2px,transparent 1.4px);background-size:22px 22px}

/* nav */
.nav{background:var(--card);border-bottom:2px solid var(--ink)}
body[data-role=client] .nav{border-top:6px solid var(--accent)}
body[data-role=editor] .nav{border-top:6px solid var(--accent)}
.nav-links a{border-bottom:0;padding:6px 14px;border:2px solid transparent;border-radius:999px;color:var(--muted)}
.nav-links a:hover{border-bottom:0;border-color:var(--ink);color:var(--ink)}
.nav-links a.on{border:2px solid var(--ink);background:var(--accent);color:var(--onacc);font-weight:800}
.role-tag{background:var(--pop)!important;border:2px solid var(--ink);color:var(--ink)}
.role-tag.client,.role-tag.editor{background:var(--pop)!important}

/* buttons */
.btn{border:2px solid var(--ink);border-radius:14px;background:var(--card);box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;font-weight:800}
.btn:hover{opacity:1;transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.primary{background:var(--accent);color:var(--onacc)}
.btn.dark{background:var(--ink);color:#fff}
.btn.small{box-shadow:3px 3px 0 var(--ink)}
.btn.ghost{border-color:transparent;box-shadow:none;background:transparent}
.btn.ghost:hover{transform:none;border-color:var(--ink)}
.btn.light{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.btn:disabled{box-shadow:none;transform:none}

/* cards */
.card{border:2px solid var(--ink);border-radius:20px;box-shadow:5px 5px 0 var(--ink)}
.card.dark{box-shadow:5px 5px 0 var(--accent)}
.job:hover{box-shadow:8px 8px 0 var(--ink);transform:translate(-2px,-2px)}
.job{transition:transform .12s,box-shadow .12s}
.card.lime{background:var(--lime)}
.chip.line{border-width:2px}
.chip{border-width:2px;border-color:var(--ink)}
.chip.accent{background:var(--accent);color:var(--onacc)}
.chip.lime{background:#B8F5DA}
.eyebrow{background:var(--pop);border:2px solid var(--ink);font-family:'Space Mono',ui-monospace,monospace;font-size:13px}
body[data-role=client] .hero .eyebrow,body[data-role=editor] .hero .eyebrow{background:var(--pop)}

/* hero */
.hero h1{font-size:70px;letter-spacing:-.035em}
.hero h1 .hl{display:inline-block;background:var(--pop);padding:0 .14em;border:2px solid var(--ink);border-radius:14px;transform:rotate(-1.5deg);box-shadow:4px 4px 0 var(--ink);margin-top:6px}
.hero .tl{border:2px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);overflow:visible!important}
.hero .tl::after{content:"0% client fee";position:absolute;right:-12px;top:-16px;background:var(--pop);color:var(--ink);font:800 13px 'DM Sans',system-ui,sans-serif;padding:8px 16px;border-radius:999px;border:2px solid var(--ink);transform:rotate(7deg);box-shadow:3px 3px 0 var(--ink)}
body[data-role=editor] .hero .tl::after{content:"You keep 90%"}
.cats{background:var(--card);border-block:2px solid var(--ink)}
.step .n{background:var(--accent);color:var(--onacc);border:2px solid var(--ink)}
.card.lime .step .n{background:var(--ink);color:var(--lime)}
.card.dark .step .n{background:var(--accent);color:var(--onacc)}
.cta-band{background:var(--accent);color:var(--onacc);border-block:2px solid var(--ink)}
.cta-band .btn.primary{background:#fff;color:var(--ink)}
.cta-band .btn.light{background:var(--ink);color:#fff}
footer{background:var(--ink)}

/* forms */
input,select,textarea{border:2px solid var(--field);border-radius:12px;background:#fff}
input:focus,select:focus,textarea:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--ink)}
.filters input,.filters select{border-color:var(--ink)}
.err,.notice{background:var(--peach);border:2px solid var(--ink)}
.role-pick label:has(input:checked){box-shadow:5px 5px 0 var(--accent)}

/* workspace */
.stp.done .dot{background:var(--lime);border-width:2px}
.stp.cur .dot{background:var(--accent);color:var(--onacc);border-width:2px}
.tab{border-width:2px}
.tab.on{background:var(--accent);color:var(--onacc)}
.msg .b{border-width:2px}
.msg.me .b{background:var(--ink)}
.msg.them .b{background:var(--pop)}
.avatar{background:var(--pop);border-width:2px}
.thumb{border-width:2px;border-radius:16px}

@media (max-width:980px){.hero h1{font-size:54px}}
@media (max-width:640px){.hero h1{font-size:40px}.hero .tl::after{right:-4px}.nav-links a{padding:5px 10px}}

/* pages that use "wrap section" together lost their side padding */
.wrap.section{padding-left:64px;padding-right:64px}
@media (max-width:980px){.wrap.section{padding-left:32px;padding-right:32px}}
@media (max-width:640px){.wrap.section{padding-left:16px;padding-right:16px}}