/* ===== PROJECT MOCKUP ILLUSTRATIONS ===== */
.project-mockup{background:rgba(255,255,255,.12);border-radius:8px;overflow:hidden;width:100%;max-width:360px;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.project-card-lg .project-mockup{max-width:420px;margin:0 auto}
.mockup-sm{max-width:260px;margin:0 auto}
.mockup-bar{display:flex;gap:5px;padding:8px 10px;background:rgba(255,255,255,.1)}
.mockup-bar span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
.mockup-body{display:flex;min-height:140px}
.project-card-lg .mockup-body{min-height:180px}
.mockup-sidebar{width:30%;padding:10px;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px}
.mockup-content{flex:1;padding:10px;display:flex;flex-direction:column;gap:8px}
.mockup-content.full{width:100%}
.m-line{height:6px;border-radius:3px;background:rgba(255,255,255,.15)}
.m-line.w40{width:40%}.m-line.w50{width:50%}.m-line.w60{width:60%}.m-line.w70{width:70%}.m-line.w80{width:80%}.m-line.w90{width:90%}
.m-block{height:50px;border-radius:6px;background:rgba(255,255,255,.1)}
.m-lines{display:flex;flex-direction:column;gap:6px}

.m-chart{display:flex;align-items:flex-end;gap:6px;height:100%;padding:8px 12px}
.chart-bar{flex:1;background:rgba(255,255,255,.2);border-radius:3px 3px 0 0;transition:height .3s ease}
.project-card:hover .chart-bar{background:rgba(255,255,255,.35)}

.m-cards{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px}
.m-card-item{height:48px;border-radius:6px;background:rgba(255,255,255,.1)}

.m-chat{display:flex;flex-direction:column;gap:6px;padding:8px 12px}
.chat-bubble{height:16px;border-radius:8px;background:rgba(255,255,255,.15)}
.chat-bubble.left{width:60%;align-self:flex-start}
.chat-bubble.right{width:45%;align-self:flex-end;background:rgba(255,255,255,.25)}
.chat-bubble.long{width:75%}

.m-table{display:flex;flex-direction:column;gap:1px;padding:4px}
.table-row{height:24px;background:rgba(255,255,255,.08);border-radius:3px}
.table-row:first-child{background:rgba(255,255,255,.15)}