.canvas-media{min-width:0;margin-top:16px;padding-top:16px;border-top:2px solid #e2eaf3;color:#17324d}
.canvas-media button,.builder-workspace .canvas-media button{min-width:44px;min-height:44px;font-family:var(--rocode-font-family);border:1px solid #b9cfe1;border-radius:6px;background:#fff;color:#254d75}
.canvas-media-heading{margin:0 0 4px;font:750 17px/1.3 var(--rocode-font-family);color:#24476b}
.canvas-media-featured{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}
.canvas-media .canvas-media-featured{scroll-snap-type:none}
.canvas-media-friend-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:-6px 0 12px}
.canvas-media-friend-nav[hidden]{display:none!important}
.canvas-media .canvas-media-friend-nav button,.builder-workspace .canvas-media-friend-nav button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:6px 4px;border:1px solid #d0c2a9;border-radius:8px;background:#fffaf0;color:#554733;font-size:14px;font-weight:700;box-shadow:0 2px 0 #e2d5bc}
.canvas-media .canvas-media-friend-nav button:hover:not([aria-disabled=true]){background:#f6ecd9;border-color:#ad9470}
.canvas-media .canvas-media-friend-nav button[aria-disabled=true],.canvas-media .canvas-media-friend-nav button[aria-disabled=true]:hover{opacity:.45;cursor:default;background:#fffaf0;border-color:#d0c2a9}
.canvas-media .canvas-media-toggle,.builder-workspace .canvas-media-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px;font-size:16px;font-weight:700;text-align:left;border:2px solid #b8d4ef;border-radius:10px;background:#f3f9ff;box-shadow:0 2px 0 #d8e6f5}
.canvas-media-toggle-state{font-size:21px;font-weight:600;line-height:1;color:#3974ac}
.canvas-media .canvas-media-toggle[aria-expanded=true]{background:#eaf2ff;border-color:#8cafe0}
.canvas-media-tray{padding-top:12px;min-width:0}
.canvas-media-tray[hidden]{display:none!important}
.canvas-media-tip{margin:0 0 12px;font-size:13px;line-height:1.5;color:#52677c}
.canvas-media-field{display:block;min-width:0;margin-bottom:12px;font-size:13px;line-height:1.4;font-weight:650}
.canvas-media-field>span{display:block;margin-bottom:5px}
.canvas-media-field input,.canvas-media-field select,.builder-workspace .canvas-media-field select{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:8px;border:1px solid #a9bfd5;border-radius:5px;background:#fff;color:#17324d;font:14px/1.4 var(--rocode-font-family)}
.canvas-media-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.canvas-media .canvas-media-picture,.builder-workspace .canvas-media-picture{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;min-height:100px;padding:6px;font-size:12px;line-height:1.35;text-align:center;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.canvas-media-picture:active{cursor:grabbing}
.canvas-media-thumbnail{display:flex;align-items:center;justify-content:center;width:100%;height:60px;border-radius:3px;background:#f3f7fc;pointer-events:none}
.canvas-media-thumbnail img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.canvas-media-name{display:block;overflow-wrap:anywhere;font-weight:650;pointer-events:none}
.canvas-media .canvas-media-friend,.builder-workspace .canvas-media-friend{--friend-paper:#edf9ff;--friend-edge:#b9e0ef;min-height:96px;padding:7px 4px 8px;gap:4px;border:2px solid var(--friend-edge);border-radius:13px;background:var(--friend-paper);box-shadow:0 3px 0 var(--friend-edge);font-size:15px;line-height:1.3;color:#24476b;transition:transform .14s ease,box-shadow .14s ease}
.canvas-media-friend:nth-child(2){--friend-paper:#fff3ef;--friend-edge:#f0c5b8}
.canvas-media-friend:nth-child(3){--friend-paper:#fff9df;--friend-edge:#e8d890}
.canvas-media-friend:nth-child(4){--friend-paper:#f4efff;--friend-edge:#d8c7ed}
.canvas-media-friend .canvas-media-thumbnail{height:52px;border-radius:0;background:transparent}
.canvas-media-friend .canvas-media-name{font-weight:750}
.canvas-media .canvas-media-friend:hover:not(:disabled),.builder-workspace .canvas-media-friend:hover:not(:disabled){border-color:var(--friend-edge);background:var(--friend-paper);transform:translateY(-2px);box-shadow:0 5px 0 var(--friend-edge)}
.canvas-media .canvas-media-friend:active,.builder-workspace .canvas-media-friend:active{transform:translateY(2px);box-shadow:0 1px 0 var(--friend-edge)}
.canvas-media-count{margin:10px 0 8px;font-size:12px;line-height:1.4;color:#52677c}
.canvas-media-pagination{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.canvas-media .canvas-media-pagination button,.builder-workspace .canvas-media-pagination button{padding:8px 4px;font-size:13px;font-weight:650}
.canvas-media-empty{grid-column:1/-1;margin:0;padding:12px 4px;font-size:13px;line-height:1.5;color:#52677c}
.canvas-media button:hover:not(:disabled){background:#edf4ff;border-color:#7199d9}
.canvas-media button:focus-visible,.canvas-media input:focus-visible,.canvas-media select:focus-visible{outline:3px solid #1f4fbf;outline-offset:2px}
.canvas-media button:disabled{opacity:.45;cursor:default}
@media(max-width:720px){.canvas-media{width:100%}.canvas-media-featured{grid-template-columns:repeat(4,minmax(0,1fr));max-width:560px}.canvas-media .canvas-media-toggle{max-width:220px}.canvas-media-tray{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:560px}.canvas-media-tray .canvas-media-tip{grid-column:1/-1;margin:0}.canvas-media-field{margin:0}.canvas-media-field input,.canvas-media-field select,.builder-workspace .canvas-media-field select{font-size:16px}.canvas-media-results{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}.canvas-media .canvas-media-picture{font-size:13px}.canvas-media .canvas-media-friend{font-size:15px}.canvas-media-thumbnail{height:76px}.canvas-media-count{align-self:center;margin:0}.canvas-media-pagination{align-self:center}}
@media(max-width:380px){.canvas-media-tray{grid-template-columns:minmax(0,1fr)}.canvas-media-results{grid-template-columns:repeat(2,minmax(0,1fr))}.canvas-media-pagination{max-width:220px}}
@media(prefers-reduced-motion:reduce){.canvas-media .canvas-media-friend,.builder-workspace .canvas-media-friend{transition:none}.canvas-media .canvas-media-friend:hover:not(:disabled),.builder-workspace .canvas-media-friend:hover:not(:disabled),.canvas-media .canvas-media-friend:active,.builder-workspace .canvas-media-friend:active{transform:none}}