:root{
  --teal:#0E8F8F;
  --teal-dark:#0c6f74;
  --teal-light:#13B0A6;
  --ink:#13201E;
  --muted:#7B8785;
  --muted-2:#5A6562;
  --bg:#F7F6F3;
  --card-bg:#fff;
  --border:#ECE9E3;
  --border-2:#E0DCD3;
  --tint:#F6F4EF;
  --green:#1F9E6E;
  --green-bg:#1F9E6E1a;
  --amber:#E0922A;
  --amber-bg:#E0922A1f;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}

/* ===== top nav ===== */
.topnav{
  position:sticky;top:0;z-index:30;
  background:rgba(247,246,243,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 40px;height:68px;
  display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--teal),var(--teal-light));}
.brand-name{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.nav-links{display:flex;gap:6px;}
.nav-link{font-size:14px;font-weight:600;color:var(--muted);padding:8px 13px;border-radius:9px;cursor:pointer;}
.nav-link.active{font-weight:700;color:var(--ink);background:#0E8F8F14;}
.nav-spacer{flex:1;}
.side-toggle{display:flex;background:#EDEAE4;border-radius:11px;padding:4px;gap:3px;}
.side-toggle a{cursor:pointer;font-size:13px;font-weight:700;padding:8px 15px;border-radius:8px;color:var(--muted);}
.side-toggle a.active{background:#fff;color:var(--ink);box-shadow:0 2px 6px -2px rgba(15,40,40,.3);}
.btn-post{cursor:pointer;background:var(--teal);color:#fff;font-size:14px;font-weight:700;padding:11px 18px;border-radius:11px;box-shadow:0 10px 22px -12px rgba(14,143,143,.8);border:none;}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-light));flex:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.logout-form{display:inline-flex;}

/* ===== layout ===== */
.page{display:flex;gap:28px;padding:34px 40px 60px;max-width:1440px;margin:0 auto;}
.sidebar{flex:none;width:316px;display:flex;flex-direction:column;gap:20px;}
.main{flex:1;min-width:0;}

.card{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:0 14px 30px -22px rgba(15,40,40,.5);}
.card-title{font-size:16px;font-weight:800;color:var(--ink);}
.card-sub{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:3px;margin-bottom:14px;}

.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.cat-btn{text-align:center;padding:11px 8px;border-radius:11px;font-size:13px;font-weight:700;border:1.5px solid var(--border-2);background:#fff;color:var(--muted-2);cursor:pointer;display:block;}
.cat-btn.active{border-color:var(--teal);background:var(--teal);color:#fff;}

.tint-box{background:var(--tint);border-radius:11px;padding:12px 13px;font-size:13.5px;color:var(--ink);font-weight:600;margin-bottom:10px;}
.tint-box.muted{font-size:12.5px;color:var(--muted);line-height:1.4;}

.btn-primary{cursor:pointer;background:var(--teal);color:#fff;text-align:center;font-weight:700;font-size:14px;padding:13px;border-radius:12px;border:none;width:100%;display:block;}

.jobs-card{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:8px;box-shadow:0 14px 30px -22px rgba(15,40,40,.5);}
.jobs-card-label{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;padding:12px 13px 8px;}
.job-row{padding:13px;border-radius:14px;display:block;}
.job-row.current{background:#0E8F8F0d;border:1px solid #0E8F8F2a;}
.job-row-top{display:flex;justify-content:space-between;align-items:center;}
.job-row-name{font-size:14px;font-weight:800;color:var(--ink);}
.job-row-name.muted{font-weight:700;color:var(--ink);}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);}
.job-row-meta{font-size:12px;color:var(--muted);font-weight:600;margin-top:3px;}

.main-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:6px;flex-wrap:wrap;gap:10px;}
.eyebrow{font-size:13px;font-weight:700;color:var(--teal);}
.h1{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.025em;margin-top:4px;}

.banner-success{background:var(--teal);border-radius:14px;padding:14px 18px;color:#fff;margin:14px 0 18px;display:flex;align-items:center;gap:11px;}
.banner-check{width:24px;height:24px;border-radius:50%;background:#fff;color:var(--teal);display:flex;align-items:center;justify-content:center;font-weight:800;flex:none;}

.count-line{font-size:13px;font-weight:700;color:var(--muted);margin:16px 0 14px;}

.tradie-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}
@media (max-width: 1100px){.tradie-grid{grid-template-columns:1fr 1fr;}}
@media (max-width: 760px){.tradie-grid{grid-template-columns:1fr;} .page{flex-direction:column;} .sidebar{width:100%;}}

.tcard{background:#fff;border:1.5px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 14px 30px -22px rgba(15,40,40,.5);transition:transform .15s ease,box-shadow .15s ease;}
.tcard:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px rgba(15,40,40,.55);}
.tcard.selected{border-color:var(--teal);}
.tcard-banner{height:120px;background:linear-gradient(135deg,#0E8F8F22,#0E8F8F08);background-image:repeating-linear-gradient(45deg,rgba(14,143,143,.10) 0 9px,transparent 9px 18px);position:relative;}
.pill{position:absolute;display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.94);border-radius:9px;padding:5px 10px;font-size:13px;font-weight:800;color:var(--ink);}
.pill.rating{left:12px;top:12px;}
.pill.avail{right:12px;top:12px;font-size:11.5px;font-weight:700;white-space:nowrap;}
.dot-sm{width:6px;height:6px;border-radius:50%;display:inline-block;}
.star{color:#F2A93B;}

.tcard-body{padding:16px;}
.tcard-name{font-size:17px;font-weight:800;color:var(--ink);white-space:nowrap;}
.tcard-sub{font-size:12.5px;color:var(--muted);font-weight:600;}
.badge-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.badge{font-size:11px;font-weight:700;color:var(--teal-dark);background:#0E8F8F14;padding:4px 9px;border-radius:8px;}
.msg-box{font-size:13px;color:#3D4845;line-height:1.5;margin-top:12px;background:var(--tint);border-radius:11px;padding:11px 12px;min-height:64px;}
.portfolio-row{display:flex;gap:6px;margin-top:11px;}
.portfolio-sq{flex:1;height:44px;border-radius:9px;background:linear-gradient(135deg,#0E8F8F22,#0E8F8F08);background-image:repeating-linear-gradient(45deg,rgba(14,143,143,.10) 0 7px,transparent 7px 14px);}
.tcard-actions{display:flex;gap:9px;margin-top:14px;}
.btn-outline{cursor:pointer;flex:1;text-align:center;padding:11px;border-radius:11px;background:#fff;border:1px solid var(--border-2);font-weight:700;font-size:13px;color:var(--ink);}
.btn-select{cursor:pointer;flex:1;text-align:center;padding:11px;border-radius:11px;background:var(--ink);color:#fff;font-weight:800;font-size:13px;border:none;}
.btn-select.selected{background:var(--teal);}

.empty-state{padding:60px 20px;text-align:center;color:var(--muted);}

/* ===== tradie feed ===== */
.tradie-page{padding:34px 40px 60px;max-width:1180px;margin:0 auto;}
.stat-row{display:flex;gap:18px;margin-bottom:28px;flex-wrap:wrap;}
.stat-hero{flex:1;min-width:240px;background:var(--ink);border-radius:20px;padding:22px 24px;color:#EAF6F4;}
.stat-hero-eyebrow{font-size:13px;color:#7FD6CF;font-weight:700;}
.stat-hero-h{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-top:6px;}
.stat-hero-sub{font-size:13.5px;opacity:.7;margin-top:4px;}
.stat-box{flex:none;width:160px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:20px;text-align:center;}
.stat-box-num{font-size:28px;font-weight:800;color:var(--ink);}
.stat-box-label{font-size:12px;color:var(--muted);font-weight:600;}

.section-h{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:14px;}
.lead-list{display:flex;flex-direction:column;gap:14px;}
.lead-row{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px 20px;display:flex;align-items:center;gap:20px;box-shadow:0 14px 30px -24px rgba(15,40,40,.5);transition:transform .15s ease;flex-wrap:wrap;}
.lead-row:hover{transform:translateX(3px);}
.lead-title-row{display:flex;align-items:center;gap:10px;}
.lead-title{font-size:16.5px;font-weight:800;color:var(--ink);}
.lead-trade{font-size:11px;font-weight:700;color:var(--teal-dark);background:#0E8F8F14;padding:3px 9px;border-radius:7px;}
.lead-desc{font-size:13px;color:#5A6562;margin-top:4px;line-height:1.45;}
.lead-meta{font-size:12px;color:#9AA4A2;font-weight:600;margin-top:6px;}
.lead-action{flex:none;text-align:right;margin-left:auto;}
.lead-competing{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px;}
.btn-express{cursor:pointer;padding:11px 18px;border-radius:11px;font-weight:800;font-size:13.5px;background:var(--teal);color:#fff;white-space:nowrap;border:none;}
.btn-express.sent{background:var(--green);}

/* ===== profile slide-over ===== */
.overlay{position:fixed;inset:0;background:rgba(15,32,30,.4);z-index:60;display:none;}
.overlay.open{display:block;}
.slideover{position:fixed;top:0;right:-460px;bottom:0;width:460px;background:var(--bg);z-index:61;box-shadow:-30px 0 60px -30px rgba(15,40,40,.5);overflow-y:auto;transition:right .2s ease;}
.slideover.open{right:0;}
.slideover-head{position:relative;height:150px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));}
.slideover-close{cursor:pointer;position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink);border:none;}
.slideover-body{padding:0 26px 30px;margin-top:-44px;}
.profile-head{display:flex;align-items:flex-end;gap:14px;}
.profile-avatar{width:88px;height:88px;border-radius:22px;background:linear-gradient(135deg,var(--teal-light),var(--teal));border:4px solid var(--bg);flex:none;}
.profile-name{font-size:22px;font-weight:800;color:var(--ink);white-space:nowrap;}
.profile-sub{font-size:13px;color:var(--muted);font-weight:600;}
.stat-trio{display:flex;gap:10px;margin-top:18px;}
.stat-trio-item{flex:1;background:#fff;border:1px solid var(--border);border-radius:14px;padding:13px;text-align:center;}
.stat-trio-num{font-size:19px;font-weight:800;color:var(--ink);}
.stat-trio-label{font-size:11px;color:var(--muted);font-weight:600;}
.section-title{font-size:16px;font-weight:800;color:var(--ink);margin:22px 0 12px;}
.portfolio-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.portfolio-item{aspect-ratio:1;border-radius:12px;background:linear-gradient(135deg,#0E8F8F22,#0E8F8F08);background-image:repeating-linear-gradient(45deg,rgba(14,143,143,.10) 0 8px,transparent 8px 16px);display:flex;align-items:flex-end;padding:8px;}
.portfolio-label{font-family:ui-monospace,monospace;font-size:8.5px;color:var(--teal-dark);opacity:.7;text-transform:uppercase;}

/* ===== auth pages ===== */
.auth-wrap{max-width:420px;margin:80px auto;padding:0 20px;}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px;box-shadow:0 14px 30px -22px rgba(15,40,40,.5);}
.auth-title{font-size:24px;font-weight:800;color:var(--ink);margin-bottom:6px;}
.auth-sub{font-size:13.5px;color:var(--muted);margin-bottom:24px;}
.form-field{margin-bottom:14px;}
.form-field label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--border-2);font-size:14px;font-family:inherit;
}
.form-field .errorlist{color:#c0392b;font-size:12px;margin:4px 0 0;padding:0;list-style:none;}
.auth-foot{font-size:13px;color:var(--muted);margin-top:18px;text-align:center;}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;border-radius:12px;border:1px solid var(--border-2);background:#fff;color:var(--ink);font-size:14px;font-weight:700;text-decoration:none;box-sizing:border-box;}
.btn-google:hover{background:#f7f8f8;}
.auth-divider{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:12px;margin:18px 0;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;border-bottom:1px solid var(--border);}
.auth-divider span{padding:0 10px;}
.messages{max-width:1440px;margin:14px auto 0;padding:0 40px;}
.msg{background:#0E8F8F14;color:var(--teal-dark);border:1px solid #0E8F8F33;border-radius:10px;padding:10px 14px;font-size:13.5px;font-weight:600;margin-bottom:8px;}