/* Technician panel + signup (v1.9) — mobile-first, app-like cards */
.hsb-tp{--ink:#0f2233;--muted:#5d7081;--soft:#8497a7;--line:#e3eaf0;--brand:#0a7f9e;--brand-d:#07647d;--brand-l:#e6f6fa;--deep:#0d3556;--ok:#13805a;--bad:#c0392b;
  --grad:linear-gradient(135deg,#0d3556 0%,#0a7f9e 62%,#14b8a6 100%);--r:18px;--shadow:0 1px 2px rgba(15,34,51,.05),0 12px 36px -14px rgba(15,34,51,.2);
  max-width:780px;margin:0 auto;font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.hsb-tp *{box-sizing:border-box}
.hsb-tp h3{margin:0 0 10px;font-size:19px;font-weight:800;letter-spacing:-.02em}
.hsb-tp a{color:var(--brand);font-weight:600;text-decoration:none}.hsb-tp a:hover{text-decoration:underline}
.hsb-tp .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:0 0 14px;box-shadow:var(--shadow)}

/* auth (login / signup) */
.hsb-tp .auth{max-width:520px;margin:0 auto 14px;padding:0;overflow:hidden}
.hsb-tp .auth>form,.hsb-tp .auth>.msg,.hsb-tp .auth>.ok,.hsb-tp .auth>p{margin-left:24px;margin-right:24px}
.hsb-tp .auth>form{margin-bottom:24px}
.hsb-tp .auth>p{margin-top:14px;margin-bottom:22px}
.hsb-tp .auth-hd{position:relative;background:var(--grad);color:#fff;padding:30px 24px 26px;margin:0 0 22px;overflow:hidden;isolation:isolate}
.hsb-tp .auth-hd::after{content:"";position:absolute;width:240px;height:240px;right:-80px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);z-index:-1}
.hsb-tp .auth-hd .logo{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);font-size:26px;margin-bottom:14px;backdrop-filter:blur(6px)}
.hsb-tp .auth-hd h3{color:#fff;font-size:24px;margin:0 0 4px}
.hsb-tp .auth-hd p{margin:0;color:#dff2f7;font-size:14px}

/* fields */
.hsb-tp label{display:block;margin:0 0 14px;font-weight:700;font-size:13px;color:#2a3f50}
.hsb-tp input[type=text],.hsb-tp input[type=email],.hsb-tp input[type=password],.hsb-tp input[type=tel],.hsb-tp input[type=number],.hsb-tp select,.hsb-tp textarea{width:100%;padding:13px 14px;min-height:48px;border:1.5px solid var(--line);border-radius:12px;background:#f8fbfd;font:inherit;font-weight:500;color:var(--ink);margin-top:6px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.hsb-tp input:focus,.hsb-tp select:focus,.hsb-tp textarea:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(10,127,158,.14)}
.hsb-tp .err{display:block;color:var(--bad);font-size:12px;font-weight:600;margin-top:5px}.hsb-tp .err:empty{display:none}
.hsb-tp .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.hsb-tp .fgrid .full{grid-column:1/-1}
.hsb-tp .hp{position:absolute;left:-9999px}
.hsb-tp .skills{margin:2px 0 16px}.hsb-tp .skills>b{display:block;font-size:13px;color:#2a3f50;margin-bottom:8px}
.hsb-tp .pills{display:flex;flex-wrap:wrap;gap:8px}
.hsb-tp .pill{margin:0;position:relative;font-weight:600}
.hsb-tp .pill input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.hsb-tp .pill span{display:inline-block;padding:9px 15px;border:1.5px solid var(--line);border-radius:99px;background:#fff;font-size:13px;font-weight:600;color:#2a3f50;transition:all .15s}
.hsb-tp .pill:hover span{border-color:var(--brand);background:var(--brand-l)}
.hsb-tp .pill input:checked+span{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 16px -8px rgba(10,127,158,.7)}
.hsb-tp .pill input:focus-visible+span{outline:3px solid #8fd3e3;outline-offset:2px}
.hsb-tp .skills label{display:block}

/* buttons */
.hsb-tp .btn{display:inline-block;border:0;border-radius:99px;padding:12px 20px;font:inherit;font-weight:700;cursor:pointer;background:var(--grad);color:#fff;box-shadow:0 12px 22px -12px rgba(10,127,158,.8);transition:transform .15s,filter .15s}
.hsb-tp .btn:hover{filter:brightness(1.06);transform:translateY(-1px);text-decoration:none}
.hsb-tp .btn[disabled]{opacity:.6;cursor:default;transform:none}
.hsb-tp .btn.ghost{background:#fff;color:var(--deep);border:1.5px solid var(--line);box-shadow:none}
.hsb-tp .btn.red{background:#fff;color:#b32d2e;border:1.5px solid #ecc3c0;box-shadow:none}
.hsb-tp .btn.green{background:linear-gradient(135deg,#0f6f4b,#1ea672);box-shadow:0 12px 22px -12px rgba(19,128,90,.8)}
.hsb-tp .btn.block{display:block;width:100%;margin-top:10px;padding:15px 20px;font-size:15px}

/* header bar */
.hsb-tp .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hsb-tp .hero{background:var(--grad);border:0;color:#fff;position:relative;overflow:hidden}
.hsb-tp .hero::after{content:"";position:absolute;width:220px;height:220px;right:-70px;top:-100px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.26),rgba(255,255,255,0) 70%);pointer-events:none}
.hsb-tp .hero small{display:block;color:#d7f0f6}
.hsb-tp .hero .who{display:flex;align-items:center;gap:12px}
.hsb-tp .hero .av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);font-weight:800;font-size:18px}
.hsb-tp .hero .avail{margin:0;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px;font-size:13px}
.hsb-tp .hero .avail input{accent-color:#14b8a6;width:18px;height:18px}
.hsb-tp .hero .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);padding:9px 14px;font-size:13px;backdrop-filter:blur(6px)}

/* tabs */
.hsb-tp .tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;padding:4px;background:#eaf1f5;border-radius:99px;scrollbar-width:none}
.hsb-tp .tabs::-webkit-scrollbar{display:none}
.hsb-tp .tabs button{white-space:nowrap;border:0;background:transparent;border-radius:99px;padding:10px 16px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;color:#4b6173;flex:1;transition:all .15s}
.hsb-tp .tabs button.on{background:#fff;color:var(--brand-d);box-shadow:0 2px 8px rgba(15,34,51,.14)}

/* jobs */
.hsb-tp .job{cursor:pointer;display:flex;gap:14px;align-items:center;transition:transform .18s,box-shadow .18s,border-color .18s}
.hsb-tp .job:hover{transform:translateY(-2px);border-color:#bcd6e1;box-shadow:0 16px 32px -16px rgba(15,34,51,.3)}
.hsb-tp .job img{width:52px;height:52px;border-radius:14px;background:var(--brand-l);padding:6px;object-fit:contain}
.hsb-tp .job .m{flex:1;min-width:0}.hsb-tp .job .m b{display:block;font-weight:700}.hsb-tp .job .m small{color:var(--muted);display:block;font-size:12.5px}
.hsb-tp .st{display:inline-block;padding:4px 11px;border-radius:99px;font-size:12px;font-weight:700;background:#eaf0f4;color:#4b6173}
.hsb-tp .st.pending{background:#fff4dc;color:#9a6200}.hsb-tp .st.confirmed{background:#e3f0fd;color:#1a5fa0}.hsb-tp .st.assigned{background:#efe8fb;color:#5b3da0}.hsb-tp .st.completed{background:#e3f7ee;color:var(--ok)}.hsb-tp .st.cancelled{background:#fdeeec;color:#a2302c}
.hsb-tp .row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #eef3f7}.hsb-tp .row:last-child{border-bottom:0}
.hsb-tp .row span:first-child{width:118px;color:var(--muted);font-weight:600;flex:none;font-size:13.5px}
.hsb-tp .row span:last-child{font-weight:600;min-width:0;overflow-wrap:anywhere}
.hsb-tp .note{background:var(--brand-l);border:1px solid #cdebf3;border-radius:14px;padding:13px 15px;color:var(--brand-d);font-size:14px}
.hsb-tp .msg{padding:12px 14px;border-radius:12px;margin:0 0 14px;background:#e3f7ee;border:1px solid #b8e6c8;color:#17633a;font-weight:600;font-size:14px}
.hsb-tp .msg.bad{background:#fdeeec;border-color:#f2c6c0;color:#96382d}
.hsb-tp .ok{padding:20px;border:1px solid #b8e6c8;background:#e3f7ee;border-radius:14px;color:#17633a;margin:0 24px 24px;line-height:1.6}
.hsb-tp .empty{text-align:center;color:var(--muted);padding:40px 12px;background:#fff;border:1.5px dashed var(--line);border-radius:var(--r)}
.hsb-tp #rej-box textarea{min-height:90px}

@media(max-width:560px){
  .hsb-tp .fgrid{grid-template-columns:1fr}.hsb-tp .card:not(.auth){padding:15px}
  .hsb-tp .auth>form,.hsb-tp .auth>.msg,.hsb-tp .auth>.ok,.hsb-tp .auth>p{margin-left:18px;margin-right:18px}
  .hsb-tp .row span:first-child{width:96px}
  .hsb-tp .top{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){.hsb-tp *{transition:none!important}}