/* The Hustle app: players hire players (src/ui/hustle-ui.js) */
#phone .hu-rate { background: linear-gradient(135deg, #18203a, #2c3a63); color: #fff; border-radius: 20px; padding: 13px 16px 12px; margin-bottom: 10px; text-align: center; }
#phone .hu-rate span { font: 800 10.5px var(--ui); letter-spacing: 1.6px; opacity: .75; }
#phone .hu-stars { margin: 3px 0 1px; line-height: 1; }
#phone .hu-stars i { font-style: normal; font-size: 25px; color: rgba(255,255,255,.22); margin: 0 1px; }
#phone .hu-stars i.on { color: var(--gold); text-shadow: 0 0 10px rgba(245,179,1,.45); }
#phone .hu-rate em { font: 700 12px var(--ui); font-style: normal; opacity: .85; }
#phone .hu-tabs { position: sticky; top: 0; z-index: 2; background: #f5f7f6; margin: 0 -16px 8px; padding: 4px 16px 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
#phone .hu-tabs button { border: 0; border-radius: 999px; padding: 8px 2px; font: 800 12px var(--ui); background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
#phone .hu-tabs button.on { background: var(--brand); color: #fff; }
#phone .hu-badge { display: inline-block; min-width: 17px; padding: 0 5px; border-radius: 999px; background: #e74c3c; color: #fff; font: 800 10.5px/17px var(--ui); font-style: normal; text-align: center; }
#phone .chips.hu-wrap { flex-wrap: wrap; overflow: visible; }
#phone .hu-job .hrow > div { flex: 1; min-width: 0; }
#phone .hrow b .hu-ic { display: block; width: 42px; height: 42px; object-fit: contain; } /* the kind's picture (assets/ui/hustle) */
#phone .chips .hu-chip { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: 4px; }
#phone .hu-job .hrow strong { overflow-wrap: anywhere; }
#phone .hu-det { color: var(--ink) !important; white-space: pre-wrap; overflow-wrap: anywhere; }
#phone .hu-fee { font: 800 15px var(--ui); font-style: normal; color: #1e8e4e; white-space: nowrap; text-align: right; }
#phone .hu-fee small { display: block; font: 700 10px var(--ui); color: var(--muted); }
#phone .hrow .hu-st { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 800 10.5px var(--ui) !important; margin: 0 0 3px !important; background: var(--soft); color: var(--muted) !important; }
#phone .hu-st.open { background: #e6f6ec; color: #1e8e4e !important; } #phone .hu-st.hired { background: var(--brand-soft); color: var(--brand-d) !important; }
#phone .hu-st.submitted { background: #fff4d6; color: #9a6b00 !important; } #phone .hu-st.done { background: #e6f6ec; color: #1e8e4e !important; }
#phone .hu-job.cancelled { opacity: .6; }
#phone .hu-job .lead.small { margin: 8px 0 0; }
#phone .hu-field { margin-bottom: 10px; }
#phone .hu-field label { display: block; font: 700 12px var(--ui); color: var(--muted); margin: 0 0 4px 4px; }
#phone .hu-field input, #phone .hu-field textarea, #phone .hu-note input { width: 100%; box-sizing: border-box; border: 0; border-radius: 14px; padding: 11px 14px; font: 600 14px var(--ui); background: #fff; box-shadow: inset 0 0 0 1.5px #d5dbe5; color: var(--ink); resize: none; }
#phone .hu-field input:focus, #phone .hu-field textarea:focus, #phone .hu-note input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--brand); }
#phone .hu-note { display: flex; gap: 6px; margin-top: 10px; }
#phone .hu-note input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 13px; }
#phone .hu-app { display: flex; align-items: center; gap: 6px; padding: 8px 0 0; margin-top: 8px; border-top: 1px solid #eef1f5; }
#phone .hu-app div { flex: 1; min-width: 0; } #phone .hu-app strong { display: block; font: 800 13px var(--ui); }
#phone .hu-app span { display: block; font: 500 12px var(--ui); color: var(--muted); overflow-wrap: anywhere; }
#phone .hu-app button, #phone .hu-note button { flex: none; border: 0; border-radius: 12px; padding: 8px 10px; font: 700 12px var(--ui); background: var(--brand-soft); color: var(--brand-d); cursor: pointer; }
#phone .hu-app button.go, #phone .hu-note button.go { background: var(--brand); color: #fff; }
#phone .hbtns button.hu-flag { background: transparent; color: var(--muted); margin-left: auto; }
#phone .hbtns button:disabled { opacity: .55; cursor: default; }
#phone .hu-rateit { display: flex; align-items: center; gap: 2px; margin-top: 8px; }
#phone .hu-rateit span { font: 700 12px var(--ui); color: var(--muted); margin-right: 6px; }
#phone .hu-rateit button { border: 0; background: none; font-size: 26px; line-height: 1; color: #d5dbe5; cursor: pointer; padding: 0 2px; }
#phone .hu-rateit button.on { color: var(--gold); } #phone .hu-rateit button:disabled { cursor: default; }
/* the decorate panel while decorating for a client: the budget left */
.bp-top span.over { background: #fdecea !important; color: #c0392b !important; }