:root{
  --green-deep:#0b3d2e;
  --green:#1a6d4c;
  --green-bright:#2f9e6f;
  --green-mint:#e8f5ee;
  --ink:#101512;
  --paper:#fbfdfb;
  --grey:#5c6b64;
  --line:#dbe8e0;
  --red:#c0392b;
  --amber:#b9770e;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.55;
}
a{color:inherit;}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px;}
header.topbar{
  background:var(--green-deep);color:#fff;padding:16px 0;
}
header.topbar .wrap{display:flex;align-items:center;justify-content:space-between;}
.logo{font-weight:800;font-size:20px;letter-spacing:-0.5px;}
.logo span{color:var(--green-bright);}
.topbar-right{display:flex;align-items:center;gap:14px;font-size:14px;}
.btn{
  display:inline-block;border:none;cursor:pointer;border-radius:8px;font-weight:700;
  padding:11px 18px;font-size:14px;text-decoration:none;
}
.btn-primary{background:var(--green-deep);color:#fff;}
.btn-primary:hover{background:var(--green);}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,0.4);color:#fff;}
.btn-ghost:hover{border-color:#fff;}
.btn-outline{background:#fff;border:1.5px solid var(--line);color:var(--green-deep);}
.btn-outline:hover{border-color:var(--green-bright);}
.btn-sm{padding:7px 12px;font-size:12.5px;}
.btn-danger{background:var(--red);color:#fff;}

.auth-shell{
  min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:40px 20px;
}
.auth-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:40px;max-width:400px;width:100%;
  box-shadow:0 20px 40px rgba(11,61,46,0.06);
}
.auth-card h1{font-size:24px;font-weight:800;color:var(--green-deep);margin-bottom:6px;}
.auth-card p.sub{color:var(--grey);font-size:14px;margin-bottom:26px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;font-weight:700;color:var(--green-deep);margin-bottom:6px;}
.field input, .field textarea, .field select{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit;
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none;border-color:var(--green-bright);}
.form-error{
  background:#fdecea;color:var(--red);border:1px solid #f5c6c1;padding:10px 14px;border-radius:8px;
  font-size:13.5px;margin-bottom:16px;display:none;
}
.form-error.show{display:block;}
.auth-switch{text-align:center;margin-top:20px;font-size:13.5px;color:var(--grey);}
.auth-switch a{color:var(--green);font-weight:700;}

main.container{padding:40px 0 80px;}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px;}
.page-head h1{font-size:28px;font-weight:800;color:var(--green-deep);letter-spacing:-0.5px;}
.page-head p{color:var(--grey);font-size:14px;}

.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:18px;}
.grid{display:grid;gap:18px;}
.grid-2{grid-template-columns:1fr 1fr;}

.status-badge{
  display:inline-block;padding:4px 11px;border-radius:100px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.3px;
}
.status-requested{background:#fdf2e0;color:var(--amber);}
.status-in_progress{background:#e3edfb;color:#1d4ed8;}
.status-review{background:#f3e8fd;color:#7e22ce;}
.status-done{background:var(--green-mint);color:var(--green-deep);}
.status-on_hold{background:#f2f2f2;color:#555;}

.pay-status{display:inline-block;padding:4px 11px;border-radius:100px;font-size:12px;font-weight:800;}
.pay-paid{background:var(--green-mint);color:var(--green-deep);}
.pay-pending{background:#fdf2e0;color:var(--amber);}
.pay-refunded{background:#f2f2f2;color:#555;}

.project-card{border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:16px;background:#fff;cursor:pointer;transition:box-shadow .15s;}
.project-card:hover{box-shadow:0 8px 20px rgba(11,61,46,0.08);}
.project-card .row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.project-card h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:4px;}
.project-card .meta{color:var(--grey);font-size:13px;}
.project-price{font-weight:800;color:var(--green-deep);font-size:18px;}

table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line);}
th,td{padding:12px 14px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line);}
th{background:var(--green-mint);color:var(--green-deep);font-weight:800;text-transform:uppercase;font-size:11.5px;letter-spacing:0.4px;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:#fafcfb;}

.comment{padding:14px 0;border-bottom:1px solid var(--line);}
.comment:last-child{border-bottom:none;}
.comment .who{font-weight:800;font-size:13px;color:var(--green-deep);}
.comment .who.admin{color:var(--red);}
.comment .when{font-size:11.5px;color:var(--grey);margin-left:8px;font-weight:500;}
.comment .text{font-size:14px;margin-top:4px;}
.comment-form{display:flex;gap:10px;margin-top:16px;}
.comment-form textarea{flex:1;resize:vertical;min-height:44px;}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(11,61,46,0.35);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal-backdrop.show{display:flex;}
.modal{background:#fff;border-radius:16px;padding:30px;max-width:440px;width:100%;max-height:90vh;overflow:auto;}
.modal h2{font-size:20px;font-weight:800;color:var(--green-deep);margin-bottom:18px;}
.tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--line);}
.tab{padding:10px 4px;font-weight:700;font-size:14px;color:var(--grey);cursor:pointer;border-bottom:2px solid transparent;}
.tab.active{color:var(--green-deep);border-color:var(--green-bright);}
.pay-btns{display:flex;gap:8px;flex-wrap:wrap;}
.empty-state{text-align:center;padding:60px 20px;color:var(--grey);}
.empty-state h3{color:var(--green-deep);margin-bottom:8px;}
.muted{color:var(--grey);font-size:13px;}
.back-link{font-size:13.5px;font-weight:700;color:var(--green);display:inline-block;margin-bottom:20px;}

/* --- Messaging --- */
.chat-badge{
  display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff5b5b;margin-left:6px;vertical-align:middle;
}
.chat-window{
  height:380px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:14px;
  margin-bottom:14px;background:#fafcfb;display:flex;flex-direction:column;gap:10px;
}
.chat-bubble{max-width:75%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.4;}
.chat-bubble .meta{display:block;font-size:11px;opacity:0.65;margin-top:4px;}
.chat-bubble.mine{align-self:flex-end;background:var(--green-deep);color:#fff;border-bottom-right-radius:4px;}
.chat-bubble.theirs{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;}
.chat-empty{color:var(--grey);font-size:13px;text-align:center;padding:30px 0;}

.messages-layout{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:start;}
@media(max-width:820px){.messages-layout{grid-template-columns:1fr;}}
.thread-list{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.thread-item{
  padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;
  justify-content:space-between;align-items:center;gap:10px;
}
.thread-item:last-child{border-bottom:none;}
.thread-item:hover{background:#fafcfb;}
.thread-item.active{background:var(--green-mint);}
.thread-item .tname{font-weight:700;font-size:14px;color:var(--ink);}
.thread-item .tpreview{font-size:12.5px;color:var(--grey);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.thread-item .tunread{
  background:#ff5b5b;color:#fff;font-size:11px;font-weight:800;border-radius:100px;padding:2px 7px;min-width:18px;text-align:center;flex-shrink:0;
}