/* ── Product page UI mockups v2 — Velozity Global theme ── */
/* Brand: #0eca7b primary, #09965c dark, #1c1c1c ink, #faf9f5 cream */

.mu{border-radius:14px;overflow:hidden;background:#fff;border:1px solid #e8e8ec;font-family:-apple-system,system-ui,'Segoe UI',sans-serif;font-size:11px;color:#3a3a3a;line-height:1.4;text-align:left;box-shadow:0 4px 24px #0000000a,0 1px 3px #00000008;max-width:100%}
.mu *{box-sizing:border-box;margin:0;padding:0}

/* Title bar */
.mu-bar{background:linear-gradient(180deg,#fafafa,#f3f3f5);border-bottom:1px solid #e8e8ec;padding:10px 16px;display:flex;align-items:center;gap:8px}
.mu-dots{display:flex;gap:6px}.mu-dots i{width:9px;height:9px;border-radius:50%;display:block}
.mu-dots i:nth-child(1){background:#ff5f57}.mu-dots i:nth-child(2){background:#ffbd2e}.mu-dots i:nth-child(3){background:#28c840}
.mu-bar span{font-size:9px;color:#a0a0a8;margin-left:auto;letter-spacing:.02em;white-space:nowrap}

/* Dark variant */
.mu.dark{background:#141414;border-color:#2a2a2a;color:#c8ccd4}
.mu.dark .mu-bar{background:linear-gradient(180deg,#1c1c1c,#171717);border-color:#2a2a2a}
.mu.dark .mu-bar span{color:#555a6a}

/* Layout */
.mu-body{display:flex;min-height:220px;overflow:hidden}

/* Modern dark sidebar */
.mu-side{width:160px;background:linear-gradient(180deg,#1c1c1c,#171717);padding:14px 0;flex-shrink:0;border-right:1px solid #2a2a2a;overflow:hidden}
.mu-side .mu-side-logo{padding:0 14px 12px;font-size:9px;font-weight:700;color:#fff;letter-spacing:.04em;border-bottom:1px solid #2a2a2a;margin-bottom:6px;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-side .mu-side-logo i{width:16px;height:16px;background:linear-gradient(135deg,#0eca7b,#09965c);border-radius:4px;display:block;flex-shrink:0}
.mu-side-label{padding:10px 14px 3px;font-size:7px;text-transform:uppercase;letter-spacing:.08em;color:#4a4e5e}
.mu-side-item{padding:6px 14px;font-size:9px;color:#7a7e8e;cursor:default;display:flex;align-items:center;gap:6px;border-left:2px solid transparent;white-space:nowrap;overflow:hidden}
.mu-side-item.active{background:#ffffff0a;color:#fff;border-left-color:#0eca7b;font-weight:500}
.mu-side-item .dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.mu-side-item .badge{margin-left:auto;background:#0eca7b;color:#fff;font-size:7px;padding:1px 5px;border-radius:8px;font-weight:600;flex-shrink:0}
.mu-side-item .badge.warn{background:#d4a532}

/* Light sidebar variant */
.mu-side.light{background:#fafbfc;border-right:1px solid #eee}
.mu-side.light .mu-side-logo{color:#333;border-color:#eee}
.mu-side.light .mu-side-logo i{background:linear-gradient(135deg,#0eca7b,#09965c)}
.mu-side.light .mu-side-label{color:#bbb}
.mu-side.light .mu-side-item{color:#888}
.mu-side.light .mu-side-item.active{background:#e0f8ee;color:#065a38;border-left-color:#0eca7b}

/* Main area */
.mu-main{flex:1;padding:16px 18px;min-width:0;background:#fff;overflow:hidden}
.mu.dark .mu-main{background:#141414}

/* Header */
.mu-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px;flex-wrap:wrap}
.mu-header h3{font-size:13px;font-weight:600;color:#1c1c1c;letter-spacing:-.01em;white-space:nowrap}
.mu.dark .mu-header h3{color:#e8eaf0}
.mu-header .mu-breadcrumb{font-size:7px;color:#aaa;margin-bottom:2px}

/* Buttons */
.mu-btn{background:linear-gradient(180deg,#0eca7b,#0bb56b);color:#fff;border:none;border-radius:6px;padding:5px 12px;font-size:8px;font-weight:500;cursor:default;box-shadow:0 1px 3px #0eca7b30;white-space:nowrap;flex-shrink:0}
.mu-btn.outline{background:transparent;color:#0eca7b;border:1px solid #0eca7b;box-shadow:none}
.mu-btn.ghost{background:#f5f5f8;color:#555;border:1px solid #e0e0e4;box-shadow:none}
.mu-btn.dark{background:linear-gradient(180deg,#2a2a2a,#1c1c1c);color:#fff;box-shadow:0 1px 3px #00000020}
.mu-btn.sm{padding:3px 8px;font-size:7px}

/* Metric cards — glass style */
.mu-metrics{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.mu-metric{flex:1;min-width:0;background:linear-gradient(135deg,#f8faf8,#f2f5f0);border:1px solid #e4ece4;border-radius:8px;padding:10px 12px;position:relative;overflow:hidden}
.mu-metric::after{content:'';position:absolute;top:-20px;right:-20px;width:50px;height:50px;background:radial-gradient(circle,#0eca7b08,transparent);border-radius:50%}
.mu-metric span{font-size:7px;color:#8a8e82;text-transform:uppercase;letter-spacing:.04em;display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-metric strong{font-size:17px;font-weight:700;display:block;margin-top:2px;color:#1c1c1c;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-metric small{font-size:7px;color:#0eca7b;display:flex;align-items:center;gap:3px;margin-top:2px;font-weight:500;white-space:nowrap;overflow:hidden}
.mu-metric small::before{content:'';display:inline-block;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:4px solid #0eca7b;flex-shrink:0}
.mu-metric small.down::before{border-bottom:none;border-top:4px solid #c45a5a}.mu-metric small.down{color:#c45a5a}
.mu-metric.accent{background:linear-gradient(135deg,#0bb56b,#09965c);border-color:#098a55}
.mu-metric.accent span{color:#a0e8c8}.mu-metric.accent strong{color:#fff}.mu-metric.accent small{color:#c0f0d8}
.mu-metric.accent small::before{border-bottom-color:#c0f0d8}
.mu-metric.accent::after{background:radial-gradient(circle,#ffffff10,transparent)}

/* Dark metric */
.mu-metric.dark-card{background:linear-gradient(135deg,#1c1c1c,#222);border-color:#333}
.mu-metric.dark-card span{color:#6a6e7e}
.mu-metric.dark-card strong{color:#e8eaf0}
.mu-metric.dark-card small{color:#0eca7b}

/* Table */
.mu-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto}
.mu-table th{font-size:7px;text-transform:uppercase;color:#a0a0a8;letter-spacing:.05em;text-align:left;padding:6px 8px;border-bottom:1px solid #f0f0f4;font-weight:500;white-space:nowrap}
.mu-table td{font-size:9px;padding:7px 8px;border-bottom:1px solid #f8f8fa;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.mu-table tr:last-child td{border-bottom:none}
.mu-table tr:hover td{background:#fafbfc}
.mu-table .name{font-weight:600;color:#1c1c1c}

/* Pills */
.mu-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:4px;font-size:7px;font-weight:500;white-space:nowrap;flex-shrink:0}
.mu-pill.green{background:#e0f8ee;color:#065a38}.mu-pill.yellow{background:#fef7e0;color:#8a6a1e}
.mu-pill.red{background:#fde8e8;color:#9a2a2a}.mu-pill.blue{background:#e3eef8;color:#2a5a8a}
.mu-pill.purple{background:#f0e8f8;color:#6a2a9a}.mu-pill.gray{background:#f0f0f4;color:#666}
.mu-pill::before{content:'';width:4px;height:4px;border-radius:50%;flex-shrink:0}
.mu-pill.green::before{background:#0eca7b}.mu-pill.yellow::before{background:#d4a532}
.mu-pill.red::before{background:#c45a5a}.mu-pill.blue::before{background:#4a8ac4}
.mu-pill.purple::before{background:#8a5ac4}.mu-pill.gray::before{display:none}

/* Chart bars */
.mu-chart{display:flex;align-items:flex-end;gap:4px;height:60px;padding-top:6px}
.mu-chart-bar{flex:1;border-radius:3px 3px 0 0;min-width:0;position:relative;background:linear-gradient(180deg,#a0e8c8,#c0f0d8)}
.mu-chart-bar.accent{background:linear-gradient(180deg,#09965c,#0eca7b)}
.mu-chart-bar.blue{background:linear-gradient(180deg,#4a7abc,#6a9ad4)}
.mu-chart-wrap{margin-top:10px}
.mu-chart-wrap .mu-chart-labels{display:flex;gap:4px;margin-top:4px}
.mu-chart-wrap .mu-chart-labels span{flex:1;text-align:center;font-size:6px;color:#a0a0a8}

/* Sparkline */
.mu-spark{display:flex;align-items:flex-end;gap:2px;height:20px}
.mu-spark i{width:3px;border-radius:1px;background:#0eca7b;display:block;opacity:.6}
.mu-spark i:last-child{opacity:1}

/* Progress bars */
.mu-progress{height:5px;background:#f0f0f4;border-radius:10px;overflow:hidden;margin-top:4px}
.mu-progress-fill{height:100%;border-radius:10px;transition:width .6s}
.mu-progress-fill.green{background:linear-gradient(90deg,#0eca7b,#3ed99a)}
.mu-progress-fill.yellow{background:linear-gradient(90deg,#d4a532,#e4c552)}
.mu-progress-fill.red{background:linear-gradient(90deg,#c45a5a,#d47a7a)}
.mu-progress-fill.blue{background:linear-gradient(90deg,#4a8ac4,#6aaad4)}

/* Live indicator */
.mu-live{display:inline-flex;align-items:center;gap:4px;font-size:7px;color:#0eca7b;font-weight:600;background:#e0f8ee;padding:2px 8px;border-radius:10px;white-space:nowrap;flex-shrink:0}
.mu-live i{width:5px;height:5px;background:#0eca7b;border-radius:50%;animation:mu-pulse 2s infinite;flex-shrink:0}
@keyframes mu-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Waveform */
.mu-wave{display:flex;align-items:center;gap:2px;height:24px;flex-shrink:0}
.mu-wave i{width:2px;border-radius:2px;background:linear-gradient(180deg,#0eca7b,#3ed99a);display:block;animation:mu-wave-anim 1.2s ease-in-out infinite}
.mu-wave i:nth-child(1){height:30%;animation-delay:0s}.mu-wave i:nth-child(2){height:60%;animation-delay:.1s}
.mu-wave i:nth-child(3){height:100%;animation-delay:.2s}.mu-wave i:nth-child(4){height:40%;animation-delay:.3s}
.mu-wave i:nth-child(5){height:80%;animation-delay:.4s}.mu-wave i:nth-child(6){height:50%;animation-delay:.5s}
.mu-wave i:nth-child(7){height:90%;animation-delay:.6s}.mu-wave i:nth-child(8){height:35%;animation-delay:.7s}
@keyframes mu-wave-anim{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}

/* Transcript lines */
.mu-transcript{display:flex;flex-direction:column;gap:8px}
.mu-line{display:flex;gap:8px;align-items:flex-start}
.mu-line .speaker{font-size:7px;font-weight:700;min-width:36px;flex-shrink:0;padding-top:4px;text-transform:uppercase;letter-spacing:.03em}
.mu-line .speaker.a{color:#0eca7b}.mu-line .speaker.b{color:#8a6a2e}
.mu-line .text{font-size:9px;color:#444;line-height:1.5;background:#f8f9fa;padding:6px 10px;border-radius:6px;max-width:100%;border:1px solid #f0f0f4;overflow-wrap:break-word;word-break:break-word}
.mu-line .text mark{background:#d0f5e5;color:#065a38;padding:1px 3px;border-radius:3px;font-weight:600;font-size:8px}

/* Quote preview */
.mu-quote-doc{background:#fff;border:1px solid #e0e0e4;border-radius:10px;padding:14px;max-width:240px;box-shadow:0 2px 12px #0000000a;flex-shrink:0}
.mu-quote-doc .logo{font-size:9px;font-weight:700;color:#09965c;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.mu-quote-doc .logo i{width:12px;height:12px;background:linear-gradient(135deg,#0eca7b,#09965c);border-radius:3px;display:block;flex-shrink:0}
.mu-quote-doc h4{font-size:10px;margin-bottom:10px;color:#1c1c1c;font-weight:600}
.mu-quote-doc table{width:100%;border-collapse:collapse;font-size:8px}
.mu-quote-doc table th{text-align:left;font-size:6px;color:#a0a0a8;padding:3px 5px;border-bottom:1px solid #f0f0f4;text-transform:uppercase;letter-spacing:.04em}
.mu-quote-doc table td{padding:4px 5px;border-bottom:1px solid #f8f8fa;color:#555}
.mu-quote-doc .total{text-align:right;font-size:11px;font-weight:700;color:#1c1c1c;margin-top:8px;padding-top:6px;border-top:1.5px solid #e0e0e4}

/* Donut / ring chart */
.mu-ring{width:64px;height:64px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mu-ring span{font-size:14px;font-weight:700;color:#1c1c1c;position:relative;z-index:1}
.mu-ring-label{font-size:7px;color:#888;text-align:center;margin-top:4px;font-weight:500}

/* Cards grid */
.mu-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mu-card{background:linear-gradient(135deg,#fafbfc,#f5f6f8);border:1px solid #eeeef2;border-radius:6px;padding:10px}
.mu-card h4{font-size:8px;font-weight:600;color:#1c1c1c;margin-bottom:3px}
.mu-card p{font-size:7px;color:#888;line-height:1.4}

/* Tabs */
.mu-tabs{display:flex;gap:0;border-bottom:1.5px solid #f0f0f4;margin-bottom:12px;overflow-x:auto}
.mu-tab{padding:6px 12px;font-size:8px;color:#999;border-bottom:2px solid transparent;cursor:default;font-weight:500;white-space:nowrap;flex-shrink:0}
.mu-tab.active{color:#09965c;border-bottom-color:#0eca7b;font-weight:600}
.mu-tab .count{background:#f0f0f4;color:#888;font-size:6px;padding:1px 4px;border-radius:6px;margin-left:3px}
.mu-tab.active .count{background:#e0f8ee;color:#09965c}

/* Search */
.mu-search{display:flex;align-items:center;gap:6px;background:#f8f8fa;border:1px solid #e8e8ec;border-radius:6px;padding:6px 10px;font-size:8px;color:#b0b0b8;margin-bottom:12px}
.mu-search svg{width:10px;height:10px;stroke:#b0b0b8;fill:none;stroke-width:2;flex-shrink:0}

/* Form fields */
.mu-field{margin-bottom:10px}
.mu-field label{font-size:7px;color:#888;display:block;margin-bottom:3px;font-weight:500;text-transform:uppercase;letter-spacing:.03em}
.mu-field .input{background:#f8f8fa;border:1px solid #e8e8ec;border-radius:5px;padding:6px 8px;font-size:9px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Status */
.mu-status{display:inline-flex;align-items:center;gap:3px;font-size:7px;font-weight:500;white-space:nowrap}
.mu-status i{width:5px;height:5px;border-radius:50%;display:block;flex-shrink:0}
.mu-status.online i{background:#0eca7b;box-shadow:0 0 4px #0eca7b80}.mu-status.online{color:#0eca7b}
.mu-status.busy i{background:#d4a532;box-shadow:0 0 4px #d4a53280}.mu-status.busy{color:#d4a532}
.mu-status.offline i{background:#ccc}.mu-status.offline{color:#999}

/* Avatar */
.mu-avatar{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:.02em}
.mu-avatar.g{background:linear-gradient(135deg,#0eca7b,#0bb56b)}.mu-avatar.b{background:linear-gradient(135deg,#4a8ac4,#3a7ab4)}
.mu-avatar.o{background:linear-gradient(135deg,#d4a532,#c49522)}.mu-avatar.r{background:linear-gradient(135deg,#c45a5a,#b44a4a)}
.mu-avatar.p{background:linear-gradient(135deg,#8a5ac4,#7a4ab4)}
.mu-avatar.round{border-radius:50%}

/* Notification dot */
.mu-notif{position:relative}.mu-notif::after{content:'';position:absolute;top:-2px;right:-2px;width:6px;height:6px;background:#c45a5a;border-radius:50%;border:1.5px solid #fff}

/* Glass panel */
.mu-glass{background:linear-gradient(135deg,#ffffff90,#ffffff60);backdrop-filter:blur(8px);border:1px solid #ffffff40;border-radius:8px;padding:12px}

/* Tag / chip */
.mu-tag{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;background:#f0f0f4;border-radius:10px;font-size:7px;color:#666;font-weight:500;white-space:nowrap;flex-shrink:0}
.mu-tag.green{background:#e0f8ee;color:#065a38}

/* Timeline */
.mu-timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:14px}
.mu-timeline::before{content:'';position:absolute;left:3px;top:4px;bottom:4px;width:1.5px;background:#e8e8ec}
.mu-tl-item{display:flex;gap:10px;padding:6px 0;position:relative}
.mu-tl-item::before{content:'';position:absolute;left:-11px;top:10px;width:6px;height:6px;border-radius:50%;background:#0eca7b;border:2px solid #fff;z-index:1}
.mu-tl-item:not(:last-child){border-bottom:1px solid #f8f8fa}
.mu-tl-time{font-size:7px;color:#a0a0a8;min-width:36px;flex-shrink:0;padding-top:1px}
.mu-tl-content{font-size:9px;color:#555;overflow-wrap:break-word;word-break:break-word;min-width:0}

/* Chat / message bubble */
.mu-bubble{max-width:220px;padding:8px 12px;border-radius:10px 10px 10px 2px;font-size:9px;line-height:1.5;color:#333;overflow-wrap:break-word;word-break:break-word}
.mu-bubble.wa{background:#dcf8c6;border:1px solid #c8e8b0}
.mu-bubble.incoming{background:#f0f0f4;border-radius:10px 10px 2px 10px}
.mu-bubble .time{font-size:6px;color:#999;margin-top:3px;text-align:right}

/* Empty state */
.mu-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;color:#b0b0b8;text-align:center;gap:6px}
.mu-empty svg{width:28px;height:28px;stroke:#d0d0d8;fill:none;stroke-width:1.5}

/* ── Responsive ── */
/* Tablet — tighten everything */
@media(max-width:820px){
.mu-body{min-height:180px}
.mu-side{width:120px;padding:10px 0}
.mu-side .mu-side-logo{font-size:8px;padding:0 10px 10px}
.mu-side-item{font-size:8px;padding:5px 10px}
.mu-main{padding:12px 14px}
.mu-header h3{font-size:11px}
.mu-metric strong{font-size:14px}
.mu-metric{padding:8px 10px}
.mu-metrics{gap:6px}
.mu-table td,.mu-table th{padding:5px 6px;font-size:7px}
.mu-table .name{font-size:8px}
.mu-chart{height:44px}
}

/* Mobile — hide sidebar, stack metrics */
@media(max-width:550px){
.mu-side{display:none}
.mu-body{min-height:160px}
.mu-main{padding:10px 12px}
.mu-metrics{flex-wrap:wrap;gap:6px}
.mu-metric{min-width:calc(50% - 3px);flex:none}
.mu-header h3{font-size:10px}
.mu-metric strong{font-size:13px}
.mu-chart{height:36px}
.mu-table td{max-width:80px}
.mu-cards{grid-template-columns:1fr}
}

/* Extra small — ensure nothing breaks */
@media(max-width:400px){
.mu-metrics{flex-direction:column}
.mu-metric{min-width:100%}
.mu-table{font-size:7px}
.mu-table td,.mu-table th{padding:4px 5px}
}