@layer base;@layer modules{.mockup{border:1px solid var(--line);max-width:1080px;box-shadow:var(--shadow-xl);text-align:left;background:#fff;border-radius:16px;margin:0 auto;position:relative;overflow:hidden}.mockup:before{content:"";background:var(--grad);z-index:-1;opacity:0;border-radius:17px;position:absolute;inset:-1px}.mockup__bar{border-bottom:1px solid var(--line);background:var(--surface-2);align-items:center;gap:8px;padding:12px 16px;display:flex}.dot{border-radius:50%;width:10px;height:10px;display:inline-block}.dot--r{background:#ff5f57}.dot--y{background:#febc2e}.dot--g{background:#28c840}.mockup__url{font-family:var(--font-mono), monospace;color:var(--muted);border:1px solid var(--line);background:#fff;border-radius:6px;margin-left:12px;padding:5px 12px;font-size:12.5px}.mockup__body{grid-template-columns:220px 1fr;min-height:460px;display:grid}.mockup__side{border-right:1px solid var(--line);background:var(--surface-2);padding:16px 12px;font-size:13.5px}.ms__brand{align-items:center;gap:8px;margin-bottom:12px;padding:6px 8px;font-weight:700;display:flex}.ms__mark{background:var(--grad);border-radius:5px;width:18px;height:18px}.ms__group{text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);padding:14px 8px 6px;font-size:11px}.ms__item{color:var(--ink-2);cursor:default;border-radius:8px;padding:7px 10px;font-weight:500;display:block}.ms__item--active{border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-sm);background:#fff}.mockup__main{padding:22px 24px}.mm__top{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.mm__title{letter-spacing:-.02em;font-size:22px;font-weight:700}.mm__sub{color:var(--muted);font-size:13px}.mm__actions{align-items:center;gap:10px;display:flex}.avatars{display:inline-flex}.avatar{background:var(--grad);color:#fff;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;margin-left:-8px;font-size:11px;font-weight:700;display:inline-flex}.avatar:first-child{margin-left:0}.avatar.lg{width:40px;height:40px;font-size:13px}.avatar.a1{background:linear-gradient(135deg,teal,#9bfffc)}.avatar.a2{background:linear-gradient(135deg,#0ddbd4,#5ed8ff)}.avatar.a3{color:#171717;background:linear-gradient(135deg,#1cac78,#6fefc7)}.chip{background:var(--surface-3);color:var(--ink-2);border:1px solid var(--line);border-radius:999px;align-items:center;padding:5px 10px;font-size:12.5px;font-weight:500;display:inline-flex}.chip--ghost{color:var(--muted);background:0 0;border-style:dashed}.chip--primary{background:var(--grad);color:#fff;border-color:#0000;box-shadow:0 4px 10px -2px #00808066}.mm__filters{flex-wrap:wrap;gap:8px;margin-bottom:18px;display:flex}.mm__table{border-collapse:collapse;border:1px solid var(--line);border-radius:10px;width:100%;margin-bottom:18px;font-size:13.5px;overflow:hidden}.mm__table th{text-align:left;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;background:var(--surface-2);border-bottom:1px solid var(--line);padding:10px 14px;font-size:12px;font-weight:600}.mm__table td{border-bottom:1px solid var(--line);color:var(--ink-2);padding:10px 14px}.mm__table tr:last-child td{border-bottom:0}.mm__table tr:hover td{background:var(--surface-2)}.tag{background:var(--surface-3);color:var(--muted);border-radius:999px;padding:2px 8px;font-size:11.5px;font-weight:600;display:inline-block}.tag--gold{color:#a3742a;background:#c89b3c24}.tag--blue{color:#0d96b5;background:#0ddbd429}.mm__widgets{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.widget{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px}.widget__label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;font-size:12px}.widget__value{letter-spacing:-.02em;font-size:22px;font-weight:700}.widget__delta{margin-top:4px;font-size:12px}.widget__delta--up{color:#168f5b}.widget__bars{align-items:flex-end;gap:4px;height:40px;margin-top:10px;display:flex}.widget__bars span{background:var(--grad);opacity:.85;border-radius:3px 3px 0 0;flex:1}.widget__pipe{flex-direction:column;gap:6px;margin-top:10px;display:flex}.widget__pipe span{background:var(--c,var(--brand));height:8px;width:var(--w,50%);opacity:.92;border-radius:4px}}@layer responsive;