.device-preview-container,.mode-tile{background-color:#141414;overflow:hidden}.mode-tile{display:flex;flex-direction:column;border:1px solid #2a2a2a;padding:0;border-radius:12px;color:#fff;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}.mode-tile:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.4);border-color:#3a3a3a}.device-preview-container{height:140px;align-self:center;padding:5px}.device-preview-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.mode-tile .device-svg{height:100%;width:auto;display:block}.mode-tile-content{padding:12px 14px;background-color:#1a1a1a}.mode-tile-title{font-size:15px;font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eee}.tile-id{font-size:14px;color:#666;font-weight:400;position:relative;top:-2.5px;margin-right:6px}.mode-tile-info-panel{display:none;aspect-ratio:2/1;background:#141414;padding:10px 10px 0;overflow-y:auto;flex-direction:column;gap:8px;border-bottom:1px solid #2a2a2a}.mode-tile-info-panel:after{content:"";display:block;height:6px;flex-shrink:0}.preview-mode-info .mode-tile-info-panel{display:flex}.preview-mode-info .device-preview-container{display:none}.mode-tile-info-pattern{display:flex;align-items:center;justify-content:space-between}.mode-tile-info-pattern-name{font-size:11px;color:#999;font-weight:600;white-space:nowrap;min-width:44px;overflow:hidden;text-overflow:ellipsis}.mode-tile-info-swatches{display:flex;gap:3px}.color-swatch{width:14px;height:14px;border-radius:50%;border:1px solid #333;flex-shrink:0}.mode-tile-info-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.mode-tile-info-meta{flex:1;min-width:0}.mode-tile-info-creator{font-size:12px;color:#aaa;font-weight:500}.mode-tile-info-description{font-size:11px;color:#777;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mode-tile-device-icon{width:32px;height:32px;border-radius:6px;flex-shrink:0;opacity:.8}.mode-tile-info-divider{border:0;border-top:1px solid #2a2a2a;margin:6px 0 4px;width:100%;flex-shrink:0}