@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --hpf-bg:#f4f5f7;
  --hpf-surface:#ffffff;
  --hpf-surface-soft:#f8f9fb;
  --hpf-text:#111827;
  --hpf-muted:#667085;
  --hpf-line:#e4e7ec;
  --hpf-sidebar:#ffffff;
  --hpf-sidebar-text:#344054;
  --hpf-sidebar-active:#111827;
  --hpf-red:#d62b1f;
  --hpf-red-dark:#b42318;
  --hpf-gold:#c98b4f;
  --hpf-green:#15803d;
  --hpf-orange:#b45309;
  --hpf-shadow-sm:0 4px 14px rgba(16,24,40,.05);
  --hpf-shadow-md:0 14px 34px rgba(16,24,40,.07);
  --hpf-radius:14px;
}

html,
body.hpf-standalone{
  margin:0!important;
  padding:0!important;
  min-height:100%!important;
  background:var(--hpf-bg)!important;
  color:var(--hpf-text)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

body.hpf-standalone #hpf-app{
  min-height:100vh!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

.hpf-portal,
.hpf-portal *{
  box-sizing:border-box!important;
}

.hpf-portal{
  display:grid!important;
  grid-template-columns:260px minmax(0,1fr)!important;
  min-height:100vh!important;
  width:100%!important;
  background:var(--hpf-bg)!important;
}

/* =========================================================
   SIDEBAR
========================================================= */

.hpf-sidebar{
  position:sticky!important;
  top:0!important;
  height:100vh!important;
  padding:18px 14px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  background:var(--hpf-sidebar)!important;
  border-right:1px solid var(--hpf-line)!important;
  box-shadow:none!important;
  overflow-y:auto!important;
  z-index:50!important;
}

.hpf-sidebar-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:78px!important;
  padding:0 8px 18px!important;
  margin:0 0 18px!important;
  border-bottom:1px solid var(--hpf-line)!important;
}

.hpf-brand{
  display:flex!important;
  align-items:center!important;
  width:220px!important;
  min-height:58px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

.hpf-brand img{
  display:block!important;
  width:214px!important;
  max-width:214px!important;
  height:auto!important;
  max-height:56px!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:none!important;
  transform:none!important;
}

.hpf-nav-label{
  padding:0 12px 9px!important;
  color:#98a2b3!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.16em!important;
  font-weight:800!important;
}

.hpf-sidebar nav{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:4px!important;
}

.hpf-sidebar nav a{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-height:46px!important;
  padding:0 13px!important;
  margin:0!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--hpf-sidebar-text)!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:650!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transition:background .18s ease,color .18s ease,transform .18s ease!important;
}

.hpf-sidebar nav a .dashicons{
  width:18px!important;
  height:18px!important;
  font-size:18px!important;
  color:#667085!important;
}

.hpf-sidebar nav a:hover{
  background:#f2f4f7!important;
  color:#101828!important;
  transform:translateX(2px)!important;
}

.hpf-sidebar nav a.active{
  background:#111827!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(17,24,39,.14)!important;
}

.hpf-sidebar nav a.active .dashicons{
  color:#fff!important;
}

.hpf-sidebar nav a.active::before{
  display:none!important;
}

.hpf-sidebar-help{
  margin-top:auto!important;
  padding:15px!important;
  border:1px solid var(--hpf-line)!important;
  border-radius:13px!important;
  background:#f9fafb!important;
  color:var(--hpf-text)!important;
  box-shadow:none!important;
}

.hpf-help-dot{
  display:block!important;
  width:8px!important;
  height:8px!important;
  margin-bottom:13px!important;
  border-radius:50%!important;
  background:var(--hpf-red)!important;
  box-shadow:0 0 0 4px rgba(214,43,31,.08)!important;
}

.hpf-sidebar-help strong{
  color:var(--hpf-text)!important;
  font-size:12px!important;
  font-weight:750!important;
}

.hpf-sidebar-help p{
  margin:7px 0 13px!important;
  color:var(--hpf-muted)!important;
  font-size:11px!important;
  line-height:1.55!important;
}

.hpf-sidebar-help a{
  color:var(--hpf-text)!important;
  font-size:11px!important;
  font-weight:750!important;
  text-decoration:none!important;
}

.hpf-logout{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:43px!important;
  margin:9px 0 0!important;
  padding:0 12px!important;
  border-radius:9px!important;
  color:#667085!important;
  font-size:12px!important;
  font-weight:650!important;
  text-decoration:none!important;
}

.hpf-logout:hover{
  background:#f2f4f7!important;
  color:#111827!important;
}

/* =========================================================
   MAIN
========================================================= */

.hpf-main{
  min-width:0!important;
  width:100%!important;
  padding:0 34px 28px!important;
  background:var(--hpf-bg)!important;
}

.hpf-top{
  width:100%!important;
  max-width:1320px!important;
  height:90px!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
}

.hpf-top-title{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}

.hpf-kicker,
.hpf-eyebrow{
  display:block!important;
  color:var(--hpf-red)!important;
  font-size:9px!important;
  line-height:1.2!important;
  letter-spacing:.17em!important;
  font-weight:800!important;
  text-transform:uppercase!important;
}

.hpf-top h1{
  margin:5px 0 0!important;
  color:var(--hpf-text)!important;
  font-size:29px!important;
  line-height:1.05!important;
  letter-spacing:-.038em!important;
  font-weight:760!important;
}

.hpf-user{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:52px!important;
  padding:6px 10px 6px 6px!important;
  border:1px solid var(--hpf-line)!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:var(--hpf-shadow-sm)!important;
}

.hpf-user>span:first-child{
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  height:38px!important;
  border-radius:10px!important;
  background:#fff4ed!important;
  color:#9a3412!important;
  font-weight:750!important;
}

.hpf-user strong,
.hpf-user small{
  display:block!important;
  max-width:220px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.hpf-user strong{
  font-size:12px!important;
}

.hpf-user small{
  margin-top:2px!important;
  color:var(--hpf-muted)!important;
  font-size:10px!important;
}

.hpf-user>.dashicons{
  color:#98a2b3!important;
  font-size:15px!important;
}

/* =========================================================
   HERO / COMMAND
========================================================= */

.hpf-command{
  position:relative!important;
  width:100%!important;
  max-width:1320px!important;
  min-height:210px!important;
  margin:0 auto!important;
  padding:32px 34px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 280px!important;
  gap:28px!important;
  overflow:hidden!important;
  border:1px solid #e4e7ec!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 92% 0%,rgba(214,43,31,.06),transparent 30%),
    linear-gradient(125deg,#ffffff 0%,#ffffff 72%,#fff7f4 100%)!important;
  box-shadow:var(--hpf-shadow-md)!important;
}

.hpf-command::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:4px!important;
  background:linear-gradient(180deg,var(--hpf-red),var(--hpf-gold))!important;
}

.hpf-command::after{
  content:""!important;
  position:absolute!important;
  width:340px!important;
  height:340px!important;
  right:-170px!important;
  top:-210px!important;
  border-radius:50%!important;
  background:rgba(201,139,79,.05)!important;
}

.hpf-command-main{
  position:relative!important;
  z-index:2!important;
  max-width:820px!important;
}

.hpf-command h2{
  margin:9px 0 12px!important;
  max-width:820px!important;
  color:var(--hpf-text)!important;
  font-size:clamp(36px,4vw,54px)!important;
  line-height:1.01!important;
  letter-spacing:-.055em!important;
  font-weight:780!important;
}

.hpf-command-main p{
  max-width:730px!important;
  margin:0!important;
  color:var(--hpf-muted)!important;
  font-size:14px!important;
  line-height:1.7!important;
}

.hpf-hero-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:22px!important;
}

.hpf-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:0 17px!important;
  border:1px solid var(--hpf-red)!important;
  border-radius:9px!important;
  background:var(--hpf-red)!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:750!important;
  text-decoration:none!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease!important;
}

.hpf-btn:hover{
  background:var(--hpf-red-dark)!important;
  border-color:var(--hpf-red-dark)!important;
  transform:translateY(-1px)!important;
}

.hpf-btn-ghost{
  background:#fff!important;
  color:var(--hpf-text)!important;
  border-color:#d0d5dd!important;
}

.hpf-btn-ghost:hover{
  background:#f9fafb!important;
  border-color:#b8bec7!important;
}

.hpf-btn-small{
  min-height:38px!important;
  padding:0 14px!important;
}

.hpf-command-side{
  position:relative!important;
  z-index:2!important;
  align-self:stretch!important;
  padding:20px!important;
  border:1px solid #eaecf0!important;
  border-radius:14px!important;
  background:#f9fafb!important;
  color:var(--hpf-text)!important;
}

.hpf-command-label{
  color:#667085!important;
  font-size:10px!important;
  font-weight:750!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}

.hpf-score{
  display:flex!important;
  align-items:flex-end!important;
  margin:16px 0 13px!important;
  color:var(--hpf-text)!important;
}

.hpf-score strong{
  font-size:43px!important;
  line-height:.9!important;
  letter-spacing:-.055em!important;
}

.hpf-score span{
  margin-left:5px!important;
  color:#98a2b3!important;
  font-size:12px!important;
}

.hpf-progress{
  height:6px!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:#eaecf0!important;
}

.hpf-progress i{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,var(--hpf-red),var(--hpf-gold))!important;
}

.hpf-command-side p{
  margin:15px 0!important;
  color:var(--hpf-muted)!important;
  font-size:11px!important;
  line-height:1.6!important;
}

.hpf-command-side a{
  color:var(--hpf-text)!important;
  font-size:11px!important;
  font-weight:750!important;
  text-decoration:none!important;
}

/* =========================================================
   SHARED WIDTH
========================================================= */

.hpf-metrics-wrap,
.hpf-overview-grid,
.hpf-panel,
.hpf-columns,
.hpf-success,
.hpf-dashboard-footer{
  width:100%!important;
  max-width:1320px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* =========================================================
   METRICS
========================================================= */

.hpf-metrics-wrap{
  margin-top:26px!important;
}

.hpf-section-heading{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  margin-bottom:13px!important;
}

.hpf-section-heading h3{
  margin:6px 0 0!important;
  font-size:22px!important;
  letter-spacing:-.03em!important;
  font-weight:750!important;
}

.hpf-live-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  color:var(--hpf-muted)!important;
  font-size:10px!important;
  font-weight:650!important;
}

.hpf-live-badge i{
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:var(--hpf-green)!important;
  box-shadow:0 0 0 4px rgba(21,128,61,.08)!important;
}

.hpf-metrics{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:13px!important;
}

.hpf-metric-card{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  min-height:108px!important;
  padding:17px!important;
  border:1px solid var(--hpf-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:none!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}

.hpf-metric-card:hover{
  transform:translateY(-3px)!important;
  border-color:#cfd4dc!important;
  box-shadow:0 12px 26px rgba(16,24,40,.055)!important;
}

.hpf-metric-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 42px!important;
  height:42px!important;
  border-radius:11px!important;
  background:#f2f4f7!important;
  color:#344054!important;
}

.hpf-metric-icon .dashicons{
  font-size:18px!important;
  width:18px!important;
  height:18px!important;
}

.hpf-metric-card strong{
  display:block!important;
  color:var(--hpf-text)!important;
  font-size:24px!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
}

.hpf-metric-card span{
  display:block!important;
  margin-top:5px!important;
  color:#344054!important;
  font-size:11px!important;
  font-weight:750!important;
}

.hpf-metric-card small{
  display:block!important;
  margin-top:3px!important;
  color:#98a2b3!important;
  font-size:9px!important;
}

/* =========================================================
   PANELS
========================================================= */

.hpf-overview-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr)!important;
  gap:15px!important;
  margin-top:15px!important;
}

.hpf-panel{
  padding:24px!important;
  border:1px solid var(--hpf-line)!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:none!important;
}

.hpf-panel-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:20px!important;
  margin-bottom:20px!important;
}

.hpf-panel h3{
  margin:7px 0 7px!important;
  color:var(--hpf-text)!important;
  font-size:22px!important;
  line-height:1.1!important;
  letter-spacing:-.034em!important;
  font-weight:750!important;
}

.hpf-panel p{
  margin:0!important;
  color:var(--hpf-muted)!important;
  font-size:11px!important;
  line-height:1.6!important;
}

.hpf-status-pill{
  padding:7px 10px!important;
  border-radius:999px!important;
  background:#f2f4f7!important;
  color:#475467!important;
  font-size:9px!important;
  font-weight:750!important;
  white-space:nowrap!important;
}

.hpf-status-list{
  border-top:1px solid var(--hpf-line)!important;
}

.hpf-status-item{
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) auto!important;
  gap:13px!important;
  align-items:center!important;
  padding:14px 0!important;
  border-bottom:1px solid var(--hpf-line)!important;
}

.hpf-status-item:last-child{
  border-bottom:0!important;
  padding-bottom:0!important;
}

.hpf-status-icon{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  border-radius:11px!important;
  background:#f2f4f7!important;
  color:#344054!important;
}

.hpf-status-item strong{
  display:block!important;
  font-size:11px!important;
  font-weight:750!important;
}

.hpf-status-item small{
  display:block!important;
  margin-top:4px!important;
  color:#98a2b3!important;
  font-size:9px!important;
}

.hpf-mini-badge{
  padding:6px 9px!important;
  border-radius:999px!important;
  font-size:8px!important;
  font-weight:800!important;
}

.hpf-mini-badge.success{
  background:#ecfdf3!important;
  color:#027a48!important;
}

.hpf-mini-badge.warning{
  background:#fff7ed!important;
  color:#b54708!important;
}

.hpf-mini-badge.neutral{
  background:#f2f4f7!important;
  color:#667085!important;
}

.hpf-action-cards{
  display:grid!important;
  gap:10px!important;
}

.hpf-action-card{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 18px!important;
  gap:13px!important;
  align-items:center!important;
  min-height:67px!important;
  padding:11px!important;
  border:1px solid var(--hpf-line)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--hpf-text)!important;
  text-decoration:none!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease!important;
}

.hpf-action-card:hover{
  transform:translateX(3px)!important;
  border-color:#cfd4dc!important;
  background:#fafbfc!important;
}

.hpf-action-icon{
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  border-radius:11px!important;
  background:#111827!important;
  color:#fff!important;
  font-size:17px!important;
}

.hpf-action-card strong{
  display:block!important;
  font-size:11px!important;
  font-weight:750!important;
}

.hpf-action-card small{
  display:block!important;
  margin-top:4px!important;
  color:#98a2b3!important;
  font-size:9px!important;
  line-height:1.45!important;
}

/* =========================================================
   OTHER DASHBOARD PAGES
========================================================= */

.hpf-list{
  margin-top:19px!important;
}

.hpf-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:15px 0!important;
  border-bottom:1px solid var(--hpf-line)!important;
}

.hpf-row:last-child{
  border-bottom:0!important;
}

.hpf-row h4{
  margin:6px 0 4px!important;
  font-size:13px!important;
}

.hpf-row small{
  color:var(--hpf-muted)!important;
  font-size:10px!important;
}

.hpf-row-actions{
  display:flex!important;
  gap:8px!important;
}

.hpf-row-actions a{
  padding:8px 11px!important;
  border:1px solid var(--hpf-line)!important;
  border-radius:8px!important;
  color:var(--hpf-text)!important;
  font-size:10px!important;
  font-weight:700!important;
  text-decoration:none!important;
}

.hpf-row-actions a.primary{
  background:#111827!important;
  border-color:#111827!important;
  color:#fff!important;
}

.hpf-badge{
  display:inline-flex!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  background:#f2f4f7!important;
  color:#475467!important;
  font-size:8px!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}

.hpf-empty{
  padding:48px 20px!important;
  text-align:center!important;
  border:1px dashed #d0d5dd!important;
  border-radius:13px!important;
  background:#fafbfc!important;
}

.hpf-empty h4{
  margin:14px 0 7px!important;
}

.hpf-empty p{
  margin-bottom:17px!important;
}

.hpf-columns{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:15px!important;
}

.hpf-form{
  display:grid!important;
  gap:14px!important;
  margin-top:21px!important;
}

.hpf-form-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
}

.hpf-form label{
  display:grid!important;
  gap:7px!important;
  color:#344054!important;
  font-size:10px!important;
  font-weight:700!important;
}

.hpf-form input,
.hpf-form select,
.hpf-form textarea{
  width:100%!important;
  padding:12px 13px!important;
  border:1px solid #d0d5dd!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--hpf-text)!important;
  font:inherit!important;
  outline:none!important;
}

.hpf-form input:focus,
.hpf-form select:focus,
.hpf-form textarea:focus{
  border-color:#98a2b3!important;
  box-shadow:0 0 0 3px rgba(152,162,179,.12)!important;
}

.hpf-success{
  margin-bottom:14px!important;
  padding:12px 15px!important;
  border:1px solid #abefc6!important;
  border-radius:10px!important;
  background:#ecfdf3!important;
  color:#027a48!important;
  font-size:11px!important;
  font-weight:700!important;
}

.hpf-dashboard-footer{
  display:flex!important;
  justify-content:space-between!important;
  margin-top:22px!important;
  padding:0 2px!important;
  color:#98a2b3!important;
  font-size:9px!important;
}

/* =========================================================
   MOTION
========================================================= */

.hpf-dashboard-reveal{
  animation:hpfRise .36s ease both!important;
}

@keyframes hpfRise{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

/* =========================================================
   LOGIN
========================================================= */

.hpf-login{
  max-width:450px!important;
  margin:8vh auto!important;
  padding:34px!important;
  border:1px solid var(--hpf-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:var(--hpf-shadow-md)!important;
}

/* =========================================================
   MOBILE
========================================================= */

.hpf-sidebar-toggle,
.hpf-sidebar-close{
  display:none!important;
}

.hpf-sidebar-backdrop{
  display:none!important;
}

@media(max-width:1100px){
  .hpf-portal{
    grid-template-columns:230px minmax(0,1fr)!important;
  }

  .hpf-main{
    padding-left:24px!important;
    padding-right:24px!important;
  }

  .hpf-command{
    grid-template-columns:minmax(0,1fr) 250px!important;
  }

  .hpf-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:850px){
  .hpf-portal{
    display:block!important;
  }

  .hpf-sidebar{
    position:fixed!important;
    left:0!important;
    top:0!important;
    width:280px!important;
    transform:translateX(-102%)!important;
    transition:transform .24s ease!important;
    z-index:100!important;
  }

  .hpf-portal.sidebar-open .hpf-sidebar{
    transform:none!important;
  }

  .hpf-sidebar-toggle,
  .hpf-sidebar-close{
    display:inline-grid!important;
    place-items:center!important;
  }

  .hpf-sidebar-backdrop{
    position:fixed!important;
    inset:0!important;
    background:rgba(15,23,42,.42)!important;
    z-index:90!important;
  }

  .hpf-portal.sidebar-open .hpf-sidebar-backdrop{
    display:block!important;
  }

  .hpf-main{
    padding:0 16px 22px!important;
  }

  .hpf-command{
    grid-template-columns:1fr!important;
  }

  .hpf-overview-grid,
  .hpf-columns{
    grid-template-columns:1fr!important;
  }

  .hpf-user div{
    display:none!important;
  }
}

@media(max-width:560px){
  .hpf-top{
    height:80px!important;
  }

  .hpf-top h1{
    font-size:23px!important;
  }

  .hpf-command{
    padding:24px 19px!important;
    border-radius:15px!important;
  }

  .hpf-command h2{
    font-size:34px!important;
  }

  .hpf-metrics{
    grid-template-columns:1fr!important;
  }

  .hpf-panel{
    padding:19px!important;
  }

  .hpf-form-grid{
    grid-template-columns:1fr!important;
  }

  .hpf-dashboard-footer{
    display:block!important;
  }

  .hpf-dashboard-footer span{
    display:block!important;
    margin-top:4px!important;
  }
}
.hpf-project-meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:7px}.hpf-project-progress{height:7px;max-width:440px;margin:12px 0 5px;background:#e5e7eb;border-radius:999px;overflow:hidden}.hpf-project-progress i{display:block;height:100%;background:#111827;border-radius:inherit}.hpf-project-row>div:first-child{min-width:0;flex:1}